I have been stuck at this for a while. I'm using redux to maintain the data in my react app and using firebase database to store it. I'm unable to assign the name property of firebase as an id to their respective item.
I get this error message - Warning: Each child in a list should have a unique "key" prop.
This is how I'm assigning the id's.
This is the action that fetches data from firebase.
export const FetchPost = () => {
return dispatch => {
dispatch(FetchPostStart());
axios.get('/Data.json')
.then(response => {
const fetchedData = [];
for(let key in response.data){
fetchedData.push({
...response.data[key],
id: response.data[key].name
});
}
dispatch(FetchPostSuccess(fetchedData));
})
.catch(error => {
dispatch(FetchPostError(error));
});
}
}
This is when I render the data from redux store to the screen.
{this.props.data.reverse().map((res) => (
<div>
<Card
key={res.id}
className="Cards"
>
But the id assigned is null to all the items.