0
146
ViewsNecesito ayuda en el código de ReactJs - botón de filtro
Estoy tratando de crear un botón de filtro por ReactJs, pasé muchas veces pero aún no sé por qué no funciona. Aquí está mi 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> ) }~~~2 answers
Answer question0
Revisé tu código y el problema no está en la parte que nos mostraste. En su lugar, verifique sus códigos en la línea 103, en codepen. Tu código parece así:
const Menu = () =>{ return( <div className='menu-container'> {menu.map((menuItem) => { .... Tenga cuidado con la primera línea, ya que todos los elementos del menú permanecen en la variable del menu , aunque haya realizado el filtrado correcto, está imprimiendo el resultado para all menús.
Vi que estás enviando un accesorio a un <Menu menu={menuItems}>.... pero no lo estás usando. Para usar este accesorio, debe agregar un parámetro a su función de Menu ;
const Menu = ({menu}) =>{ return( <div className='menu-container'> {menu.map((menuItem) => {Al igual que arriba.
0
En el componente Menu , no está pasando ningún accesorio, sino que solo representa el valor const declarado en la parte superior del archivo.
Está filtrando exactamente por categorías, pero la representación no muestra la actualizada. :)
