I’m new whit React. I have always the message on the browser that "Each child in a list should have a unique "key" prop".
I’m working with components and Bootstrap.
I tried in different ways to past the API key={values.id} on the card but something is wrong. Can somebody please help me?
import React, { useState, useEffect } from 'react';
function Home() {
const [fake, setFake] = useState([]);
console.log(fake);
useEffect(() => {
fakestore();
}, [])
const fakestore = async () => {
const response = await
fetch('https://api.escuelajs.co/api/v1/products');
const jsonData = await response.json();
setFake(jsonData);
}
return (
<>
<div className='container'>
<div className='row mt-5'>
{fake.map((values) => {
return (
<>
<div className='col-12 col-md-6 col-lg-4 mt-5'>
<div className="card" key={values.id}>
<img src={values.images} className="card-img-top w-100" alt={values.description} />
<div className="card-body">
<h5 className="card-title">{values.title}</h5>
<p className="card-text">{values.description}</p>
<p className="card-text"><strong>€ {values.price.toFixed(2)}</strong></p>
<button className="btn btn-primary">Add to Wishlist </button>
</div>
</div>
</div>
</>
)
})}
</div>
</div>
</>
);
}
export default Home;
Thanks
Hope to fix the error message on the browser.
2
Answers
They key needs to attach to the highest parent within the map:
also, you have no need for a fragment here so I’ve removed it
As @pacifica94 said above, the "
key
" prop need to be placed in the outermost wrapper of element/component inside amap()
. In other words, it’s a direct element/component inside themap()
.Small notice here,
key
is a special prop that you can add in any component itself. In case that you want the wrapper is a React fragment (<></>
), you also can add key like this:Hope this help!