Comenzaré diciendo que revisé esta página y no veo ninguna razón por la que reciba este error, mis versiones están bien y no tengo Reacts duplicados.
El error aparece cuando hago clic en una tarjeta.
Esta es mi aplicación.js:
const App = () => { const [inputString, setInputString] = useState("") //Error points to here const updateInput = (e) => { const lowerString = e.target.value.toLowerCase(); setInputString(lowerString); } return ( <> <div className='search-bar-container'> <img src='https://cdn-icons.flaticon.com/png/512/868/premium/868596.png?token=exp=1647880908~hmac=5e802c3c8b8423596716ca9353212d17' className='poke-ball-img' /> <input type='text' placeholder='Search For a Pokemon!' onChange={updateInput}></input> </div> <div className='card-container'> <RenderPokemon input={inputString} /> </div> </> ); } export default App;Y este es RenderPokemon:
const RenderPokemon = (text) => { const [rawPokemonList, setRawPokemonList] = useState([]); const getPokemonData = async (id) => { //Move this out somehow, to avoid calling on every render try { const res = await fetch("https://pokeapi.co/api/v2/pokemon/" + id); const pokemon = await res.json(); return pokemon; } catch (e) { console.log(e); } }; const sortPokemonList = rawPokemonList.filter((poke) => { if(text.input === "") { return poke; } else { return poke.name.toLowerCase().includes(text.input) } }) useEffect((i) => { const promises = []; for (let i = 1; i < 152; i++) { promises.push(getPokemonData(i)); } Promise.all(promises).then((results)=>{ setRawPokemonList(results); }) }, []); return ( (sortPokemonList).map(poke=>( <div className='card' onClick={updatePokemonId} id={poke.id}> <img src={'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/' + poke.id + '.svg'} className='PokeImg' key={poke.id} id={poke.id}/> <div className='container'> <p>{poke.name}</p> </div> </div> )) ) } export default RenderPokemon;lo primero :
<input **value =inputString** type='text' placeholder='Search For a Pokemon!' onChange={updateInput}></input>@GuyMate aquí está mi reseña:
e.target.value siempre estará indefinido porque las etiquetas div no tienen valores. solo las etiquetas html especiales como las inputs tienen propiedad de valor. Entonces cambie el código de updateInput para actualizar usando la id :
const updateInput = (e) => { const id= e.target.id.toLowerCase(); setInputString(lowerString); } Luego debes pasarlo al componente RenderPokemon :
<RenderPokemon input={inputString} updatePokemonId={updatePokemonId}/> entonces deberías usar el componente RenderPokemon y usar el nombre del pokemon como id porque cada pokemon tiene una id única:
const RenderPokemon = ({ input, updatePokemonId }) => { const [rawPokemonList, setRawPokemonList] = useState([]); const getPokemonData = async (id) => { //Move this out somehow, to avoid calling on every render try { const res = await fetch("https://pokeapi.co/api/v2/pokemon/" + id); const pokemon = await res.json(); return pokemon; } catch (e) { console.log(e); } }; const sortPokemonList = rawPokemonList.filter((poke) => { if(input === "") { return poke; } else { return poke.name.toLowerCase().includes(input) } }) useEffect((i) => { const promises = []; for (let i = 1; i < 152; i++) { promises.push(getPokemonData(i)); } Promise.all(promises).then((results)=>{ setRawPokemonList(results); }) }, []); return ( (sortPokemonList).map(poke=>( <div className='card' onClick={updatePokemonId} id={poke.name}> <img src={'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/' + poke.id + '.svg'} className='PokeImg' key={poke.id} id={poke.id}/> <div className='container'> <p>{poke.name}</p> </div> </div> )) ) } export default RenderPokemon;