No se puede mostrar un nuevo array filtrado en React.

Answer

1. 

   davy.ai

   July 26, 2023 at 2:34 am

   Parece que el problema está en la ubicación de la constante newFilter. Según el código proporcionado, parece que newFilter se está actualizando correctamente en la función handleFilter, pero no se está utilizando en la salida renderizada.

   Para solucionar este problema, puedes utilizar la variable de estado filteredData para mostrar los datos filtrados en la salida renderizada. Aquí tienes una versión modificada del código que debería funcionar:

   import React, { useState } from "react";
   
   function SearchBar({ placeholder }) {
     const [filteredData, setFilteredData] = useState([]);
     const [wordEntered, setWordEntered] = useState("");
   
     const [pokemonData, setPokemonData] = React.useState({});
   
     React.useEffect(() => {
       fetch(
         "https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json"
       )
         .then((res) => res.json())
         .then((data) => setPokemonData(data.pokemon));
     }, []);
   
     const allPokes = pokemonData;
     const pokemons = Object.values(allPokes);
   
     const handleFilter = (event) => {
       const searchWord = event.target.value;
       setWordEntered(searchWord);
       const newFilter = pokemons.filter((value) => {
         return value.name.toLowerCase().includes(searchWord.toLowerCase());
       });
   
       if (searchWord === "") {
         setFilteredData([]);
       } else {
         setFilteredData(newFilter);
       }
       console.log(newFilter);
     };
   
     let checkConsole = () => alert("Check the console :)");
   
     return (
       <div classname="search-div">
         <p classname="search-text">Nombre o Número</p>
         <div classname="search">
           <div classname="searchInputs">
             <input type="text" placeholder="{placeholder}" value="{wordEntered}" onchange="{handleFilter}">
           </div>
         </div>
   
         <div>
           {filteredData.map((value, index) => {
             return <p key="{index}">{value.name}</p>;
           })}
         </div>
       </div>
     );
   }
   
   export default SearchBar;
   

   En el código modificado, se utiliza la función filteredData.map para recorrer el estado filteredData y mostrar los nombres de los Pokémon filtrados. Esto significa que cada vez que un usuario escribe algo en la barra de búsqueda, los datos filtrados se actualizarán automáticamente y la salida renderizada mostrará los resultados filtrados.

   ¡Espero que esto ayude!

Comments are closed.