Tengo una barra de navegación con 3 botones (no la barra de navegación principal) que debería filtrar los elementos del menú en Pizzas, Acompañamientos, Bebidas cuando se hace clic. Cuando hago clic en cualquiera de los botones, solo muestra uno de los menús filtrados (si hago clic en Pizzas, muestra la lista de diferentes pizzas).

El problema es que solo funciona una vez, por lo que si vuelvo a hacer clic o hago clic en Acompañamientos o Bebidas, no muestra nada, solo una página vacía. Pensé en usar useEffect para volver a renderizar, pero no puedo pensar en cómo usarlo.

¿Cómo puedo hacer que cada botón muestre los diferentes datos/elementos del menú al hacer clic en cada categoría del menú (Pizzas, Acompañamientos, Bebidas)?

 const Menu = () => { const [menuList, setMenuList] = useState(initialMenuList); function eventMenuClick(e) { const nameSelection = e.currentTarget.textContent; setMenuList((menuList) => { return menuList.filter((item) => { if (item.category === nameSelection) { return console.log(item); } return null; }); }); } return ( <div className="container"> <h1>Menu</h1> <div className="nav-container"> <ul className="menu-list"> <li className="menutype" onClick={eventMenuClick}>Pizzas</li> <li className="menutype" onClick={eventMenuClick}>Sides</li> <li className="menutype" onClick={eventMenuClick}>Drinks</li> </ul> </div> <MenuList menuList={menuList} /> <NavBar /> </div> ); }; export default Menu;

 const MenuList = ({ menuList }) => { return ( <div className="menulist-container"> {menuList.map((item) => ( <MenuItem key={item.id} title={item.name} image={item.image} price1={item.priceM} price2={item.priceL} /> ))} </div> ); }; export default MenuList;