在 ReactJs 代码中需要帮助 - 过滤器按钮

Question

I'm trying to create a filter button by ReactJs, spent a lot of times but still do not know why it's doesn't work Here are my codePen: https://codepen.io/tinproht123/pen/gOxeWpy?editors=0110

  const [menuItems, setMenuItems] = React.useState(menu);
  const [categories, setCategories] = React.useState(allCategories);
  
  const filterItems = (category) =>{
    if(category === 'all'){
      setMenuItems(menu);
      return;
    }
    const newItems = menu.filter((item)=> item.category === category)
    setMenuItems(newItems);
  }
  
  return(
    <section className='container'>
      <div className='title'>
        <h1>Our menu</h1>
      </div>
      <Categories categories={categories} filterItems={filterItems}/>
      <Menu menu={menuItems}/>
    </section>
  )
}~~~

Answer 1

I checked your code and the problem isn't in the part that you showed to us. Instead please check your codes 103th line, on codepen. Your code seems like that:

const Menu = () =>{
  return(
    <div className='menu-container'>
      {menu.map((menuItem) => {
      ....

Be careful to the first line, since your all menu items stays in menu variable, even though you made correct filtering, you're printing the result for all menus.

I saw that you're sending a prop to a <Menu menu={menuItems}>.... but you're not using it. To use this prop you should add a parameter to your Menu function;

const Menu = ({menu}) =>{
  return(
    <div className='menu-container'>
      {menu.map((menuItem) => {

Just like above.

Answer 2

In the Menu component, you're not passing any props but just rendering the const value declared on top of the file.

You're filtering exactly by categories but rendering is not showing the updated one. :)