Tengo una pregunta sobre cómo manipular el estado en mi menú desplegable. Quiero decir que ahora cuando hago clic en un elemento (por ejemplo, "Mezczyzna" - ItemsMenu - MenuItem) aparece mi elemento y cuando hago clic en otro elemento (por ejemplo, "Kobieta"-ItemsMenu - MenuItem (Kobieta es el título)) este elemento también se muestra arriba y "Mezczyzna" todavía está abierto pero quiero ocultar "Mezczyzna". No sé cómo configurar el estado para un elemento con un índice específico, por ejemplo. Ahora tengo un archivo principal - Navegación que representa (mapa) ItemsMenu con estado. ¿Cómo puedo establecer el elemento State[2] en falso? Gracias por la ayuda :)
const Navigationn = ({displayHandlerMenu}) =>{ return ( <> <SidebarWrap> {menuItems.map((item, index) => ( <ItemsMenu key={index} item={item} displayHandlerMenu={displayHandlerMenu} /> ))} </SidebarWrap> </>);}; export default Navigationn; const ItemsMenu = ({ item, displayHandlerMenu, index }) =>{ const [submenu, setSubmenu] = useState(false); const showSubmenu = () => { setSubmenu(!submenu);}; return ( <> <MenuItemLink to={item.path} onClick={showSubmenu} key={index}> <MenuItem>{item.title}</MenuItem> </MenuItemLink> {item.submenu && submenu && item.submenu.map((subItem, index) => ( <> <ItemsSubMenu key={index} item={subItem} displayHandlerMenu={displayHandlerMenu} /> </> ))} </> );}; export default ItemsMenu;Una forma simple de lograr esto es almacenar la identificación del elemento elegido actual (es mejor que sea una propiedad única, aquí por simplicidad elegí el título) como un estado en el componente principal (Navigationn), y pasar este estado como accesorios ( usar Context también es una opción) para los niños.
Cada componente secundario (ItemsMenu) muestra sus subelementos solo si el título del elemento actual es su título, y establece el título del elemento actual en su título cuando se hace clic (si ya es su título, cámbielo a nulo para que no se muestre ningún elemento) .
const Navigationn = ({ displayHandlerMenu }) => { const [currentShownItemId, setCurrentShownItemId] = useState(); return ( <> <SidebarWrap> {menuItems.map((item, index) => ( <ItemsMenu key={index} item={item} displayHandlerMenu={displayHandlerMenu} currentShownItemId={currentShownItemId} setCurrentShownItemId={setCurrentShownItemId}/> ))} </SidebarWrap> </>); }; const ItemsMenu = ({ item, displayHandlerMenu, index, currentShownItemId, setCurrentShownItemId }) => { const showSubmenu = () => { setCurrentShownItemId(currentShownItemId === item.title ? null : item.title); }; return ( <> <MenuItemLink to={item.path} onClick={showSubmenu} key={index}> <MenuItem>{item.title}</MenuItem> </MenuItemLink> {item.submenu && currentShownItemId === item.title && item.submenu.map((subItem, index) => ( <> <ItemsSubMenu key={index} item={subItem} displayHandlerMenu={displayHandlerMenu} /> </> ))} </> ); };