I am using @chakra-ui/react version 1.7.2 in my React 17.0.2 project.
This version of Chakra UI is supposed to have solved the issue of having unique keys in its elements, but I am still having the error when I test the code and in Chrome's console:
"Each child in a list should have a unique "key" prop."
Adding a unique "key" prop manually doesn't solve the issue. Any suggestions?
const MyComponent = () => {
const myArray = ['London', 'Paris'];
return (
<List>
{myArray.map(city => (
<ListItem key={city}>
<b>{city}</b>
</ListItem>
)
)}
</List>
)
};
if you have id in side the city object assign that like city.id etc. if not you can assign some unique string on the city object that is being returned. The only last resort is to use the index number of the item (it is not suggested but you can use it.). See the code below:
<List>
{myArray.map((city, index) => (
<ListItem key={index}> <=========== (you can use city.<some_unique_id_here>)
<b>{city}</b>
</ListItem>
)
)}
</List>