quiero filtrar los elementos que obtengo en la página, según el valor de la casilla de verificación (si está marcada o no). Para eso tengo el siguiente código:
import React from 'react' import CocktailCard from './CocktailCard' import { useGlobalContext } from '../helpers/context' export default function Cocktails() { const isAlcoholic = React.useRef(null); const {cocktails} = useGlobalContext() const changeFilter = (isAlcoholic) ? cocktails.filter(cocktail => cocktail.isAlcoholic === "Alcoholic") : cocktails console.log(changeFilter) if(cocktails.length < 1) { return <h2 className="section-title">No cocktails available</h2> } return ( <div> <div className="row"> <div className="form-check"> <label className="form-check-label" htmlFor="alcoholic"> Alcoholic <input className="form-check-input" type="checkbox" ref={isAlcoholic} onChange={() => { changeFilter(isAlcoholic.current.checked); }}/> </label> </div> </div> <div className="container"> <div className="row"> { cocktails.map((item) => { return <CocktailCard key={item.id} {...item}/> }) } </div> </div> </div> ) }Traté de hacer la función changeFilter para que filtrara el alcohólico, si no, devolverá la matriz actual. Seguro que hago algo mal, porque me sale un error en la consola diciendo que changeFilter no es una función.
¿Pueden darme una mejor idea de cómo debo abordar este error y la lógica en general?
En el componente, use un valor booleano para el estado de la casilla de verificación.
const [showAlcoholic, setShowAlcoholic] = useState(false); Continúe filtrando la lista de cócteles según el estado showAlcoholic . Ya tienes lógica para eso.
Establecer el estado en los cambios de entrada. Para la casilla de verificación:
onChange={event => setShowAlcoholic(event.target.checked)}Debe usar los estados React para actualizar la lista de elementos (en su caso, cócteles) y volver a renderizar el componente.
Esto se hace con el gancho useState de React . Cada vez que se actualiza el estado, el componente se vuelve a representar.
Tenga en cuenta que no hay necesidad de referencias y que se puede eliminar de la entrada.
Puede cambiar su código a esto y compararlo con lo que tenía antes. El código podría mejorarse aún más, pero quería mantenerlo más cerca de lo que ya tenía.
export default function Cocktails() { const [isAlcoholic, setIsAlcoholic] = useState(true); const { cocktails } = useGlobalContext() const filteredCocktails = cocktails.filter((coktail) => { return isAlcoholic ? cocktail => cocktail.isAlcoholic === "Alcoholic" : true; }) if (cocktails.length < 1) { return <h2 className="section-title">No cocktails available</h2> } return ( <div> <div className="row"> <div className="form-check"> <label className="form-check-label" htmlFor="alcoholic"> Alcoholic <input className="form-check-input" type="checkbox" onChange={() => { setIsAlcoholic(isAlcoholic.current.checked); }} /> </label> </div> </div> <div className="container"> <div className="row"> { filteredCocktails.map((item) => { return <CocktailCard key={item.id} {...item} /> }) } </div> </div> </div> ) }