Блог

Я пытаюсь создать кнопку фильтра с помощью ReactJS, потратил много времени, но до сих пор не знаю, почему это не работает, Вот мой кодовый код: 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>
  )
}~~~
 

Я проверил ваш код, и проблема не в той части, которую вы нам показали. Вместо этого, пожалуйста, проверьте свои коды в 103-й строке на codepen. Ваш код выглядит так:

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

Будьте осторожны с первой строкой, так как все ваши пункты меню остаются в menu переменной, даже если вы выполнили правильную фильтрацию, вы печатаете результат для all меню.

Я видел, что вы отправляете реквизит а <Menu menu={menuItems}>.... , но вы им не пользуетесь. Чтобы использовать эту опору, вы должны добавить параметр в свою Menu функцию;

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

Так же, как и выше.

В Menu компоненте вы не передаете никаких реквизитов, а просто отображаете значение const, объявленное поверх файла.

Вы фильтруете точно по категориям, но рендеринг не показывает обновленную. 🙂