Así que me estoy acostumbrando a React y entiendo que cuando se usa la función de mapa, a cada elemento se le debe asignar una clave única. Creo que estoy haciendo esto correctamente.
return ( countries.map(country => { return <> <div key={country.name.common}> {country.name.common} <button onClick={() => setCountries([country])}>show</button> </div> </> }) )Todavía recibo un error en la consola que dice:
Advertencia: cada niño en una lista debe tener un accesorio de "clave" único.
en ListaPaíses.
en div.
Donde CountryList es el archivo del que se extrae el código. Intenté agregar la misma clave al elemento del botón y también intenté darle al elemento del botón su propia clave única.
mensaje de error clave descriptivo
países es una llamada a "https://restcountries.com/v3.1/all" api.
useEffect(() => { axios.get("https://restcountries.com/v3.1/all") .then(response => setCountries(response.data)) }, []) const handleFilterChange = (event) => { setFilter(event.target.value) const filtered = countries.filter(country => country.name.common.toLowerCase().includes(event.target.value)) setCountries(filtered) }mensaje de error de la consola junto con el aspecto de la aplicación
La clave debe colocarse en el elemento principal que está devolviendo desde la función de mapa.
Dado que en este caso es un fragmento, no puede asignarle una clave directamente, a menos que use el componente de fragmento real.
// Can't assign a key <></> // Can assign a key <React.Fragment key={...}></React.Fragment> Por otra parte, si solo tiene el div aquí, ¿por qué necesita el fragmento?
Una sintaxis más corta de su código se vería así:
return ( countries.map(country => ( <div key={country.name.common}> {country.name.common} <button onClick={() => setCountries([country])}>show</button> </div> )) )Está utilizando <> como una etiqueta perent y agrega una clave en la etiqueta secundaria <div> . elimine <></> ya que no necesita esto o use Fragment en su lugar
return countries.map(country => ( <div key={country.name.common}> {country.name.common} <button onClick={() => setCountries([country])}>show</button> </div> ))o
return countries.map(country => { return ( <React.Fragment key={country.name.common}> <div> {country.name.common} <button onClick={() => setCountries([country])}>show</button> </div> </React.Fragment> ) })