So I am getting used to React and I understand when using the map function each item needs to be assigned a unique key. I believe I am doing this correctly
return (
countries.map(country => {
return <>
<div key={country.name.common}>
{country.name.common} <button onClick={() => setCountries([country])}>show</button>
</div>
</>
})
)
I still receive an error in the console saying:
Warning: Each child in a list should have a unique "key" prop.
at CountryList.
at div.
Where CountryList being the file the code is extracted from. I have tried adding the same key to the button element and also tried giving the button element its own unique key.
countries is a call to "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)
}
The key must be placed on the parent element that you are returning from the map function.
Since it's a fragment in this case, you can't directly assign a key to it, unless you use the actual fragment component.
// Can't assign a key
<></>
// Can assign a key
<React.Fragment key={...}></React.Fragment>
Then again, if you only have the div here, why do you need the fragment?
A shorter syntax of your code would look like this:
return (
countries.map(country => (
<div key={country.name.common}>
{country.name.common}
<button onClick={() => setCountries([country])}>show</button>
</div>
))
)
You are using <> as a perent tag and add key in child <div> tag. remove <></> as you dont need this or use Fragment insted
return countries.map(country => (
<div key={country.name.common}>
{country.name.common}
<button onClick={() => setCountries([country])}>show</button>
</div>
))
or
return countries.map(country => {
return (
<React.Fragment key={country.name.common}>
<div>
{country.name.common} <button onClick={() => setCountries([country])}>show</button>
</div>
</React.Fragment>
)
})