Update value in object in nested array in React Firestore

Question

I need to update value field in object at specific index which is in array in Firebase

I tried to grab through getState() array with all objects;
then get object index which I need;
then assign new value to object, in this case content;
then rewrite whole array (comments) to newArray (actualComments) as you can see below.

And this works how I want, but only for the first time. If I try to do it again, I get error TypeError: "content" is read-only.

    export const editComment = (comment) => {
      return (dispatch, getState, { getFirebase, getFirestore }) => {
        const firestore = getFirestore();

        let actualComments = getState().firestore.data.topics[comment.topicId].comments;
        let numberArray = actualComments.findIndex(e => {return e.id === comment.commentId});
        actualComments[numberArray].content = comment.editContent;

        firestore.collection('topics').doc(comment.topicId).update({     
          comments: actualComments
        }).then(() => {
          dispatch({ type: 'EDIT_COMMENT' })
        }).catch((error) => {
          dispatch({ type: 'EDIT_COMMENT_ERROR', error})
        })
      }
    }

If your are using redux as your state manager, your state is supposed to be immutable, it appears weird to me that it doesn't complain on the first time. Have you tried updating your data through a reducer ? — Kevin Coulibaly
– Kevin Coulibaly, Commented Jan 2, 2019 at 0:09
i trying update value of one object inside firestorm database in async action (thunk) before reducer. Each 'comment' data which i render dynamicly to DOM from database is inside object in array, — Fhranis Holdt
– Fhranis Holdt, Commented Jan 2, 2019 at 9:38

Fhranis Holdt · Accepted Answer · 2019-01-04 13:25:41Z

3

My friend helped me with this, and now my updates in object at specifix index in Array works! Here is code, cheers

    /////Grab through reference all comments Array in firestore
    let actualComments = getState().firestore.data.topics[comment.topicId].comments;

    ////make container for array
    let updatedComments = [];

    //// copy array from reference to empty updatedComments array
    actualComments.forEach(comment => {
        updatedComments.push({
            content: comment.content,
            createdAt: comment.createdAt,
            editDate: comment.editDate,
            edited: comment.edited,
            id: comment.id,
            idTopic: comment.idTopic,
            name: comment.name,
            nameId: comment.nameId
        })
    })

    //// grab index which i want to update
    let numberArray = actualComments.findIndex(e => {return e.id === comment.commentId});

    //// update in specific index array
    updatedComments[numberArray].content = comment.editContent;
    updatedComments[numberArray].editDate = new Date();
    updatedComments[numberArray].edited = true; 

    //// replace updated array in firestore
    firestore.collection('topics').doc(comment.topicId).update({

        comments: updatedComments

    }).then...

answered Jan 4, 2019 at 13:25

Fhranis Holdt

2011 gold badge3 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gpoussif Over a year ago

let updatedComments = []; and actualComments.forEach(.... could be replaced with: const updatedComments = actualComments.map(comment => { ...comment }); Also, if 2 clients are modifying the object at the same time you'd end up losing information, but I guess that's an unlikely risk in your app...

Collectives™ on Stack Overflow

Update value in object in nested array in React Firestore

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related