Need help in ReactJs code - filter button

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>
  )
}~~~

ExDet · Accepted Answer · 2021-11-19 15:21:37Z

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.

answered Nov 19, 2021 at 15:21

ExDet

1681 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kid · Accepted Answer · 2021-11-19 15:19:38Z

0

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. :)

answered Nov 19, 2021 at 15:19

Kid

1,2602 gold badges16 silver badges32 bronze badges

Collectives™ on Stack Overflow

Need help in ReactJs code - filter button

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related