Aquí está la llamada original. Uso un componente NavItem que quiero mostrar la última opción del menú desplegable. Actualmente, cuando hago clic en este elemento de navegación, se crea un menú desplegable con muchos elementos para elegir.

 <NavItem char = "Any" img={require("./SG pics/Asterisk.png")}> <DropdownMenu/> </NavItem>

Aquí está el componente NavItem, es bastante básico, solo muestra una imagen y un nombre uno al lado del otro

 function NavItem(props){ const [open, setOpen] = useState(false); return( <li className="nav-item" onClick= {() => setOpen(!open)}> <a href="#" className="charSelection" > <div className="icon-button"><img alt={props.char} src={props.img} width="40" height="40" /></div> <div className="charName">{props.char}</div> </a> {open && props.children} </li> ); }

Anidé el menú desplegable con los elementos desplegables (eliminé todos menos 1 solo para ahorrar espacio). Quiero poder pasar mi selección de DropdownItem a DropdownMenu a NavItem para poder mostrar la selección y almacenarla cuando se hace clic en ella.

 function DropdownMenu(props){ function DropdownItem(props){ return( <a href="#" onClick={/*potentially set state*/} className='menu-item'> <img alt={props.char} src={props.img} width="30" height="30" /> <div className="navItem">&nbsp;&nbsp;{props.char}</div> </a> ) } return( <nav> <ul className="dropdown"> <li><DropdownItem char="Any" img = {require("./SG pics/Asterisk.png")}> Player 1 Point</DropdownItem></li> </ul> </nav> ) }

Tengo la sensación de que tiene algo que ver con useState, pero no pude encontrar una buena manera de pasarlo al segundo padre. O si hay una manera de usar un componente de reacción para seleccionar que le permita usar imágenes, hágamelo saber. He probado muchos componentes y ninguno me ha permitido tener texto y una imagen para un menú desplegable.