itinerary.sample.js

// object structure
{
        id: '57dce89f84bec9ff038b456d',
        slug: 'toronto',
        country: {
            id: '564e85d284bec915048b4568'
        },
        views: 14,
        comments: [
            {
                "id": 1,
                "user": {
                    id: '5699ab5e84bec978048b4ee0'
                },
                "comment": "blalba bla bla bla",
                "created_at": "08/07/2017",
                "hearts": 5,
                "replies": []
            }, {
                "id": 2,
                "user": {
                    id: '57ccf5ac84bec901118b4568'
                },
                "comment": "bla bla bla bla..",
                "created_at": "08/08/2017",
                "hearts": 3,
                "replies": [
                    {
                        "id": 3,
                        "user": {
                            id: '5699ab5e84bec978048b4567'
                        },
                        "comment": "bla lba bla!",
                        "created_at": "08/11/2017",
                        "hearts": 0,
                        "replies": []
                    }
                ]
            }
        ]
    }

mockApiAddComment.js

/**
 * Uncaught Error: A state mutation was detected inside a dispatch, in the path: `itineraries.0.comments.0`.
 * Take a look at the reducer(s) handling the action
 * {"type":"ITINERARY_SUBMIT_COMMENT","payload":{"resourceId":"57dce89f84bec9ff038b456d","body":"dsfsdfdsfdsf","parent":1}}
 */

export default function injectComment(itinerary, parentId, newComment) {
    for (let i in itinerary.comments) {
        if (itinerary.comments[i].id == parentId) {
            // Add comment to existing "replies" array
            let modifiedComment = {
                ...itinerary.comments[i],
                ...{
                    replies: [...itinerary.comments[i].replies, newComment]
                }
            };

            let comments = itinerary.comments.slice(); // <-- magic! (or map)
            comments.splice(i, 1, modifiedComment);

            return Object.assign({}, itinerary, {comments: comments});
        }
      
      // ...
    }

    return itinerary;
}