How would I change the state/setState of an object nested in an array of an object in an array?

Question

I am looking for the best way to update the data array with setState for the object with the name sms_group inside the collections array.

I would like to do this and keep all other objects the same.

I would like to do this without referencing collection index like collection[2]. Does anyone have any suggestions?


class SomeComponent extends React.Component {
   constructor(props) {
      super(props);

      this.state={
                 collections: [
                {
                   id: 1,
                   name: 'messages',
                   label: 'Messages',
                   new_group: true,
                   new_chat: true,
                   new_friend: false,
                   data: [
                      {
                         id: 1,
                         name: 'Patsy Paulton',
                         status: 'Traditional heading elscas sdscsd sdcsdsc',
                         imageUrl: 'https://via.placeholder.com/150',
                         newMessage: true,
                         newMessageCount: 2,
                         avatarStatus: 'avatar-state-success'
                      },
                      {
                         id: 2,
                         name: 'Karl Hubane',
                         status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                         imageUrl: 'https://via.placeholder.com/150',
                         newMessage: false
                      },
                      {
                         id: 3,
                         name: 'Entertainment Group',
                         status: '<strong>Maher Ruslandi: </strong>Hello!!!',
                         imageUrl: 'https://via.placeholder.com/150',
                         newMessage: false
                      },
                      {
                         id: 4,
                         name: 'Jennica Kindred',
                         status: 'I know how important this file is to you. You can trust me ;)',
                         imageUrl: 'https://via.placeholder.com/150',
                         newMessage: false,
                         avatarStatus: 'avatar-state-warning'
                      },
                      {
                         id: 5,
                         name: 'Marvin Rohan',
                         status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                         imageUrl: 'https://via.placeholder.com/150',
                         newMessage: false
                      },
                      {
                         id: 6,
                         name: 'Frans Hanscombe',
                         status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                         imageUrl: 'https://via.placeholder.com/150',
                         newMessage: false
                      }
                   ]
                },
                {
                   id: 2,
                   name: 'sms_groups',
                   label: 'SMS Groups',
                   new_group: false,
                   new_chat: false,
                   new_friend: true,
                   data: [
                      {
                         id: 1,
                         name: 'Harrietta Souten',
                         status: 'Traditional heading elscas sdscsd sdcsdsc',
                         imageUrl: 'https://via.placeholder.com/150',
                         newMessage: false
                      },
                      {
                         id: 2,
                         name: 'Aline McShee',
                         status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                         imageUrl: 'https://via.placeholder.com/150',
                         newMessage: false
                      },
                      {
                         id: 3,
                         name: 'Brietta Blogg',
                         status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                         imageUrl: 'https://via.placeholder.com/150',
                         newMessage: false
                      },
                      {
                         id: 4,
                         name: 'Karl Hubane',
                         status: 'I know how important this file is to you. You can trust me ;)',
                         imageUrl: 'https://via.placeholder.com/150',
                         newMessage: false
                      },
                      {
                         id: 5,
                         name: 'Jillana Tows',
                         status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                         imageUrl: 'https://via.placeholder.com/150',
                         newMessage: false
                      },
                      {
                         id: 6,
                         name: 'Alina Derington',
                         status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                         imageUrl: 'https://via.placeholder.com/150',
                         newMessage: false
                      },
                      {
                         id: 7,
                         name: 'Stevy Kermeen',
                         status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                         imageUrl: 'https://via.placeholder.com/150',
                         newMessage: false
                      },
                      {
                         id: 8,
                         name: 'Gloriane Shimmans',
                         status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                         imageUrl: 'https://via.placeholder.com/150',
                         newMessage: false
                      },
                      {
                         id: 9,
                         name: 'Bernhard Perrett',
                         status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                         imageUrl: 'https://via.placeholder.com/150',
                         newMessage: false
                      }
                   ]
                },
                {
                   id: 3,
                   name: 'phone_numbers',
                   label: 'Phone Numbers',
                   new_group: false,
                   new_chat: false,
                   new_friend: false,
                   data: [
                      {
                         id: 1,
                         name: 'Jennica Kindred',
                         status: 'Traditional heading elscas sdscsd sdcsdsc',
                         imageUrl: 'https://via.placeholder.com/150',
                         newMessage: false
                      },
                      {
                         id: 2,
                         name: 'Marvin Rohan',
                         status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                         imageUrl: 'https://via.placeholder.com/150',
                         newMessage: false
                      },
                      {
                         id: 3,
                         name: 'Frans Hanscombe',
                         status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                         imageUrl: 'https://via.placeholder.com/150',
                         newMessage: false
                      },
                      {
                         id: 4,
                         name: 'Karl Hubane',
                         status: 'I know how important this file is to you. You can trust me ;)',
                         imageUrl: 'https://via.placeholder.com/150',
                         newMessage: false
                      }
                   ]
                }
             ]
    }

I am looking to change:

                   data: [
                  {
                     id: 1,
                     name: 'Harrietta Souten',
                     status: 'Traditional heading elscas sdscsd sdcsdsc',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  },
                  {
                     id: 2,
                     name: 'Aline McShee',
                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  },
                  {
                     id: 3,
                     name: 'Brietta Blogg',
                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  },
                  {
                     id: 4,
                     name: 'Karl Hubane',
                     status: 'I know how important this file is to you. You can trust me ;)',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  },
                  {
                     id: 5,
                     name: 'Jillana Tows',
                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  },
                  {
                     id: 6,
                     name: 'Alina Derington',
                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  },
                  {
                     id: 7,
                     name: 'Stevy Kermeen',
                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  },
                  {
                     id: 8,
                     name: 'Gloriane Shimmans',
                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  },
                  {
                     id: 9,
                     name: 'Bernhard Perrett',
                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  }
               ]

to

                   data: [
                  {
                     id: 1,
                     name: 'Harrietta Souten',
                     status: 'Traditional heading elscas sdscsd sdcsdsc',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  },
                  {
                     id: 9,
                     name: 'Bernhard Perrett',
                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  }
               ]

```I would like to do this without referencing collection index like collection[2].``` What do you mean by this? — Michael Peng, Nov 21 '19 at 21:56
@Michael probably means search through the array to find the right object instead of using a hard coded index — Patrick Evans, Nov 21 '19 at 22:00
@Kevin Remember if you found an answer helpful, select an answer! — Michael Peng, Nov 27 '19 at 00:29

score 2 · Answer 1 · answered Nov 21 '19 at 22:01

2

You could try this:

const updateSmsGroups = () =>
 return state.collections.map( c => {
  if(c.name === 'sms_groups'){
    //Just make your modifications here
    c.new_group = true
   }
   return c
 } );
}

answered Nov 21 '19 at 22:01

Ricardo Gonzalez

1,827
1
14
25

score 1 · Answer 2 · answered Nov 21 '19 at 22:00

Anyway you have to give an identifier to update the correct object in your collections array.

Let's try with the name.

const { collections } = this.state

const updatedCollections = collections.reduce((acc, curr) => {
  if ( curr.name === 'sms_group' ) {
    // Update yourobject here
    curr.name = 'new_sms_group' // for example
    return [ ...acc, curr ]
  }

  return acc
}, [])

// or you can simply iterate on your collections array with map

const updatedCollections = collections.map(collection => {
  if ( collection.name === 'sms_group') {
    collection.name = 'new_sms_group'
  }
  return collection
}

this.setState({ collections: updatedCollections })

Michael Peng · Answer 3 · 2019-11-21T22:34:14.940

This question has been mostly answered, but many missed on creating a copy of the variable. See this answer here: Updating an object with setState in React

this.state ={
             collections: [
            {
               id: 1,
               name: 'messages',
               label: 'Messages',
               new_group: true,
               new_chat: true,
               new_friend: false,
               data: [
                  {
                     id: 1,
                     name: 'Patsy Paulton',
                     status: 'Traditional heading elscas sdscsd sdcsdsc',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: true,
                     newMessageCount: 2,
                     avatarStatus: 'avatar-state-success'
                  },
                  {
                     id: 2,
                     name: 'Karl Hubane',
                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  },
                  {
                     id: 3,
                     name: 'Entertainment Group',
                     status: '<strong>Maher Ruslandi: </strong>Hello!!!',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  },
                  {
                     id: 4,
                     name: 'Jennica Kindred',
                     status: 'I know how important this file is to you. You can trust me ;)',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false,
                     avatarStatus: 'avatar-state-warning'
                  },
                  {
                     id: 5,
                     name: 'Marvin Rohan',
                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  },
                  {
                     id: 6,
                     name: 'Frans Hanscombe',
                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  }
               ]
            },
            {
               id: 2,
               name: 'sms_groups',
               label: 'SMS Groups',
               new_group: false,
               new_chat: false,
               new_friend: true,
               data: [
                  {
                     id: 1,
                     name: 'Harrietta Souten',
                     status: 'Traditional heading elscas sdscsd sdcsdsc',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  },
                  {
                     id: 2,
                     name: 'Aline McShee',
                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  },
                  {
                     id: 3,
                     name: 'Brietta Blogg',
                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  },
                  {
                     id: 4,
                     name: 'Karl Hubane',
                     status: 'I know how important this file is to you. You can trust me ;)',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  },
                  {
                     id: 5,
                     name: 'Jillana Tows',
                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  },
                  {
                     id: 6,
                     name: 'Alina Derington',
                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  },
                  {
                     id: 7,
                     name: 'Stevy Kermeen',
                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  },
                  {
                     id: 8,
                     name: 'Gloriane Shimmans',
                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  },
                  {
                     id: 9,
                     name: 'Bernhard Perrett',
                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  }
               ]
            },
            {
               id: 3,
               name: 'phone_numbers',
               label: 'Phone Numbers',
               new_group: false,
               new_chat: false,
               new_friend: false,
               data: [
                  {
                     id: 1,
                     name: 'Jennica Kindred',
                     status: 'Traditional heading elscas sdscsd sdcsdsc',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  },
                  {
                     id: 2,
                     name: 'Marvin Rohan',
                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  },
                  {
                     id: 3,
                     name: 'Frans Hanscombe',
                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  },
                  {
                     id: 4,
                     name: 'Karl Hubane',
                     status: 'I know how important this file is to you. You can trust me ;)',
                     imageUrl: 'https://via.placeholder.com/150',
                     newMessage: false
                  }
               ]
            }
         ]
};


// create a copy of your state
const collections = Object.assign([], this.state.collections);
// do your changes
collections.forEach(cl => {
   if(cl.name === 'sms_groups') {
       // put your new data object here
       cl.data={};
   }
});

//this.setState({collections});
console.log(collections);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

That's why callback function on `setState`exists combined with spread operator. I think it's important to give example of how ES6 works — Hurobaki, Nov 21 '19 at 22:27
Thank you for your help. Is this to change the name property or the data property? — Kevin T, Nov 21 '19 at 22:28
You could also create a copy of your state like so: `const collections = { ...this.state.collections };` — Michael Peng, Nov 21 '19 at 22:31

How would I change the state/setState of an object nested in an array of an object in an array?

3 Answers3