Click here to Skip to main content
15,176,561 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I'm trying to make social media app using react, redux and firebase. 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.

What I have tried:

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 a new post is added to the firebase
export const NewPost = (postData) => {
         
          return (dispatch) => {
           axios.post('/Data.json', postData)
           .then(response => {
               dispatch(NewPostSuccess(response.data.name, postData));
           })
           .catch(error => {
               dispatch(NewPostError(error));
           })
          }
  }

This is the reducer for the above action
case actionTypes.New_Post_Success: 
        const {Comment, ImageUrl, Date, User} = action.payload.data;
        const id = action.payload.index;
        console.log(id+"Reducer function")
        return {
         ...state,
         loading: false,
         Data: [
           ...state.Data, 
           {Comment, ImageUrl, Date, User},
           id
          ],
        }

This is how I render the data from redux store to the screen.
{this.props.data.reverse().map((res) => (
       <div>
                  <Card
                  key={res.id}
                  className="Cards"
                  >

I used console.log to check the id assigned and it was null for all items.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900