Estoy trabajando en reaccionar js y creo un tablero con barra lateral (sidenav) en mi barra lateral. Tengo un menú con submenús. Y quiero que los menús se colapsen automáticamente cuando hago clic en uno de los menús para abrir.
<div className="main-menu"> <ul> {MenuItems.map((menuItem, key) => ( <MenuItem key={key} name={menuItem.name} iconName={menuItem.iconName} subMenu={menuItem.subMenu || []} /> ))} </ul> </div> import React, { useState } from "react"; import { Link } from "react-router-dom"; const MenuItem = (props) => { const { name, subMenu, iconName } = props; const [expand, setExpand] = useState(false); return ( <li onClick={props.onClick}> <a href="#" onClick={() => { setExpand(!expand); }} className={`menu-item ${expand ? "active" : ""}`} > <div className="menu-icon"> <span>{iconName}</span> </div> <span>{name}</span> </a> {subMenu && subMenu.length > -0 ? ( <ul className={`sub-menu ${expand ? "active" : ""}`}> {subMenu.map((menu, index, to) => ( <li key={index} className={`${expand ? "active" : ""}`}> <Link to={menu.to}>{menu.name}</Link> </li> ))} </ul> ) : null} </li> ); }; export default MenuItem;Si el accesorio del submenú tiene una identificación o un valor único, puede agregar otra variable que será la identificación del submenú abierto.
algo como:
const [opendMenuId, setOpendMenuId] = useState(null); // no menu is open by defaulty para el nombre de clase
{subMenu.map((menu, index, to) => ( <li key={index} className={`${opendMenuId === menu.id ? "active" : ""}`}> <Link to={menu.to}>{menu.name}</Link> </li> )}