I get the unique ket prop error when mapping over array. I am using an unique id and I see the logs in the console.
// MaximumTemperature.js
const Data = (data) => [
<td>{data.type}</td>,
...
]
const DataRow = (props) => {
return (
<tr>
<Data {...props} />
</tr>
)
}
const DataBody = ({ model }) => {
console.log(model.maximumTemperature())
return (
<tbody>
{
model.maximumTemperature().map(data => <DataRow key={data.id} {...data} />)
}
</tbody>
)
}
I have added an auto increment id to each object using this method
data.forEach((o, i) => o.id = i + 1);
// google chrome data example
0:
id: 1997
place: "Aarhus"
...
[[Prototype]]: Object
1:
id: 2001
place: "Copenhagen"
...
[[Prototype]]: Object
each object having an id still throws that error
Error
index.js:1 Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.
at Data (http://localhost:3000/static/js/main.chunk.js:906:18)
at tr
at DataRow
at tbody
at DataBody (http://localhost:3000/static/js/main.chunk.js:957:3)
at table
at http://localhost:3000/static/js/vendors~main.chunk.js:18635:23
at push../src/components/items/MaximumTemperature.js.__webpack_exports__.default (http://localhost:3000/static/js/main.chunk.js:976:3)
at div
at http://localhost:3000/static/js/vendors~main.chunk.js:13846:23
at div
at http://localhost:3000/static/js/vendors~main.chunk.js:17957:23
at div
uuid() will create a new id every time the component renders.
You should calculate and assign the ids to each element of the array before rendering so that they remain consistent across renders. Make sure that the ids are calculated only once throughout the component's lifecycle.
Following the above will make sure that the keys are stable but you should also make sure that they are unique.
If each element of the array has a property that is unique then use it as key instead of generating ids.
I dont think you need i uuid as a key, with i from iterate it does the job:
// view.js
const DataBody = ({ model }) => (
<tbody>
{
model.maximumTemperature().map((data,i)=> <DataRow key={i} {...data} />)
}
</tbody>
)