Estoy tratando de agregar el filtro Seach usando la reacción, y usando datos json, estoy tratando de hacerlo coincidir con el término de búsqueda
A continuación se muestra mi código
const App = () => { const [término de búsqueda, establecer término de búsqueda] = usar estado ([""]) const [consulta, establecer consulta] = usar estado ("");
useEffect(() => { const url = "https://60d075407de0b20017108b89.mockapi.io/api/v1/animals";
const fetchData = async () => { try { const response = await fetch(url); const json = await response.json(); console.log([json].query); setQuery(json.query); } catch (error) { console.log("error", error); } }; fetchData();}, []);
return ( <input type='text' placeholder='search....' onChange={event => { setSearchTerm(event.target.value) }} />
{ query.filter((val) => { if (searchTerm === "s") { return val } else if (val.name.toLowerCase().includes(searchTerm.toLowerCase())) { return val } else return false }).map((val) => { return ( <div className='user' > <p>{val.name}</p> <p>age: {monthDiff(val.bornAt)} months</p> </div> ); })} </div>); };
Cuando trato de ejecutar, recibo el siguiente error. ¿Alguien puede explicar por qué está sucediendo?
> Uncaught TypeError: Cannot read properties of undefined (reading > 'toLowerCase')Parece que está inicializando la query en una cadena en lugar de una matriz de cadenas.
Tal vez intente cambiar esto:
const [query, setQuery] = useState("");a
const [query, setQuery] = useState([""]); Además, su término de searchTerm se inicializa en una matriz: es posible que los haya mezclado :)