React reducer how to update nested object using find by id?

Question

I have the following state

const initialState = {
    photos: [],
    selectedPhoto:{},
    photosTeamId:'',
    photosProjectId:''
};

photos is an array which has a photo object and inside the photo object, there is an array of comments. I'm trying to find the correct photo then find the correct comment and update that one.

Here is my code

case actionTypes.COMMENT_UPDATED_TO_PHOTOS:
            console.log(action.data)
            return {
                ...state,
                photos: state.photos.map((photo) => {
                     photo.id === action.data.selectedPhotoId ? {
                        comments: photo.comments.map((comment) => {
                            console.log(comment)
                            return comment.id === action.data.commentId ? { ...comment, comment: action.data.fullComment } : comment
                        })
                    } : photo
                })
            }

It is not your code . It is an answer on your first question. and here, you built the second question as an aggregation of first question with its answer : https://stackoverflow.com/q/47068926/747579 — Abdennour TOUMI, Nov 03 '17 at 03:43

Oblosys · Accepted Answer · 2017-11-03T04:48:47.757

2

The code looks okay, except for the curly braces around the outer anonymous function. Since these declare a code block, there should be a return statement before photo.is === ..., or you can simply remove them altogether to get an expression:

case actionTypes.COMMENT_UPDATED_TO_PHOTOS:
            console.log(action.data)
            return {
                ...state,
                photos: state.photos.map((photo) =>
                    photo.id === action.data.selectedPhotoId ? {
                        ...photo,
                        comments: photo.comments.map((comment) => {
                            console.log(comment)
                            return comment.id === action.data.commentId ? { ...comment, comment: action.data.fullComment } : comment
                        })
                    } : photo
                )
            }

UPDATE: there was also a missing ...photo,, as mentioned in the comments.

edited Nov 03 '17 at 04:48

answered Nov 03 '17 at 04:06

Oblosys

14,468
3
30
38

Thanks, if I wanted to just update the comment data how would I do that here is the comment object {createdBy: {…}, comment: "New jjjj ggggg ggg", createdAt: "2017-11-03T02:38:16.828Z", id: "59fbd698e0048b1474207e8f"} comment : "New jjjj ggggg ggg" createdAt : "2017-11-03T02:38:16.828Z" createdBy : {lastName: "Koren", firstName: "Almog", fullName: "Almog Koren", id: "59d4821f3c28f634c99e5abf"} id : "59fbd698e0048b1474207e8f" – Almog Nov 03 '17 at 04:14
Not entirely sure what you're asking here, as the code you have already seems to do that. You can update other fields by adding them to the resulting object, e.g. `{...comment, comment: .., createdAt: ..}`, or you can put the fields you want to update in another object `updates` and use `{...comment, ...updates}`. There's lots of different ways. – Oblosys Nov 03 '17 at 04:23
When I run the update it seems like the other fields are removed, createdAt is gone? Like it's overwriting everything – Almog Nov 03 '17 at 04:27
This code will preserve all fields in each comment object, so if the other fields are gone, probably something else is wrong. Maybe they are not present in the state? (in which case your `console.log` statement will also not show them) – Oblosys Nov 03 '17 at 04:35
So yes it updates and saves all the comments but all the other objects in the photo are gone like uploadedAt which is in the outer photo object – Almog Nov 03 '17 at 04:37
Ah, I see what you mean. There's also an object spread missing. Let me update the answer. – Oblosys Nov 03 '17 at 04:41
Thanks that's perfect – Almog Nov 03 '17 at 04:48

React reducer how to update nested object using find by id?

1 Answers1