Soy principiante y estoy aprendiendo React JS. Estoy haciendo un proyecto básico en React. Tengo un cuadro de búsqueda. Cuando busco algo, mi página mostrará contenido relacionado con la búsqueda.

Aquí usé includes() para que mi búsqueda funcionara. Pero no está funcionando.

He indicado la línea de configuración de una nueva matriz de perros en la línea 40. Por favor, eche un vistazo a mi código.

Aquí están mis códigos:

Inicio.jsx

 import React, { useState, useEffect } from 'react'; import Dogs from './components/Dogs/Dogs'; import Search from './components/search/Search'; const Home = () => { const [error, setError] = useState(null); const [isLoaded, setIsLoaded] = useState(false); const [value, setValue] = useState(''); const [search, setSearch] = useState(''); const [dogs, setDogs] = useState([]); useEffect(() => { fetch('https://api.thedogapi.com/v1/breeds', { headers: { Authorization: '4139956d-7014-4fa8-b295-8e361418c807', }, }) .then(response => response.json()) .then( data => { setIsLoaded(true); setDogs(data); }, error => { setIsLoaded(true); setError(error); } ); }, []); const handleChange = event => { setValue(event.target.value); }; const handleSearch = () => { setSearch(value); setValue(''); }; // This is the function to making a new array of dogs of searched name useEffect(() => { const newDogList = dogs.filter(dog => { if (dog.name.includes(search)) dog }); setDogs(newDogList); }, [search]); if (error) { return <div>Error: {error.message}</div>; } else if (!isLoaded) { return <div>Loading...</div>; } else { return ( <div className="container"> <Search value={value} handleChange={handleChange} handleSearch={handleSearch} /> <Dogs dogs={dogs} /> </div> ); } }; export default Home;

¿Cómo puedo hacer que funcione?