I have a navigation bar with 3 buttons (not the main navbar) that should filter menu items onto Pizzas, Sides, Drinks when clicked. When I click either button it only shows one of the filtered menu (if I click Pizzas, it shows the list of different pizzas).
The issue is that it only works once, so if I click again or click Sides or Drinks, it doesn't show anything, just an empty page. I thought about using useEffect to re-render, but can't think of a way on how to use it.
How can I make each button show the different data/menu items when clicking each menu category (Pizzas, Sides, Drinks)?
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;
In your menu, you can have another state which contains only filtered values.
const [menuList, setMenuList] = useState(initialMenuList);
const [visibleMenu, setVisibleMenu] = useState(initialMenuList); // <- HERE
function eventMenuClick(e) {
const nameSelection = e.currentTarget.textContent;
const filtered = menuList.filter((item) => item.category === nameSelection);
setVisibleMenu(filtered);
}
And when you render your list, instead of original data, use filtered to be rendered.
<MenuList menuList={visibleMenu} />