Estoy tratando de implementar la funcionalidad de búsqueda en la API de Pokémon, probé diferentes métodos pero no puedo hacer que funcione por algún motivo.

Mi idea era crear una función que manejara los cambios en el evento y luego pasar eso a un enlace (useState) y tal vez hacer una solicitud de obtención y volver a procesar.

Tengo este método para obtener todos los Pokémon de la API. ¿Debo hacer un nuevo diseñado para filtrar la solicitud?

 export async function getAllPokemon(url) { return new Promise((resolve) => { fetch(url).then(res => res.json()) .then(data => { resolve(data) }) }); }

 function App() { .... const [filter, setFilter] = useState(""); function handleChange(event) { setOption(event.target.value) console.log(option) } const initialURL = `https://pokeapi.co/api/v2/pokemon?limit=50` const handleSearchChange = (e) => { setFilter(e.target.value); }; useEffect(() => { async function fetchData() { let response = await getAllPokemon(initialURL) await loadPokemon(response.results); setLoading(false); } fetchData(); }, [option]) const loadPokemon = async (data) => { let _pokemonData = await Promise.all(data.map(async pokemon => { let pokemonRecord = await getPokemon(pokemon) return pokemonRecord })) setPokemonData(_pokemonData); } return ( <> <div > <div> <input type="text" id="header-search" placeholder="Search Pokemon" name="s" onChange={handleSearchChange} /> <button >Search</button> </div> </div> <div> {loading ? <h1 style={{ textAlign: 'center' }}>Loading...</h1> : ( <> <div className="grid-container"> {pokemonData.map((pokemon) => { return <Card pokemon={pokemon} /> })} </div> </> )} </div> </> ); } export default App;