Kevin T
Reputation: 1
How would I change the state/setState of an object nested in an array of an object in an array?
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
}
]
Upvotes: 0
Views: 49
Answers (3)
Michael Peng
Reputation: 926
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>Upvotes: 0
Ricardo Gonzalez
Reputation: 1879
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
} );
}
Upvotes: 2
Hurobaki
Reputation: 4068
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 })
Upvotes: 1
Related Questions
- How to update a nested array of objects in an object in react
- react setstate change object inside array of object of array
- How do I change the state of an array of objects in React?
- set state array with nested array values from object
- how to setState an array which is nested inside an array of objects
- How to set state of a nested array in React (Edited)
- How to set a state of an array of object inside an array of objects in react
- How to update state of specific object nested in an array
- Update state of array nested inside object (ReactJS)
- reactJs setState change property on object within an array within an array