Dynamically setState() with key nested state

Question

I have a method in a component. I want to dynamically setState with a key in a nested array of objects.

method = (name, value) => {
    console.log(name)
    //a  //value is 1
    //b  //value is 2
    //c  //value is 3
    this.setState({ [name]:value })
}

when its not nested, it dynamically changes state successfully. However when its nested

 method = (name, value) => {
    this.setState({
        ArrayOfObjects:[{
            [name] : value
    }]
 }

My state becomes

state = {
    ArrayOfObjects: [{
       c: 3
    }]
}

I want

state = {
    ArrayOfObjects: [{
        a: 1,
        b: 2,
        c: 3
    }]

What's wrong?

Is ArrayOfObjects always an array with just a single (1) object like in your example? If not, does each object have some sort identifier to signal where a given name and value need to be added as property/value to? For example if becomes { ArrayOfObjects: [{ a:1 }, { a:1, b:2 }] }, which object in the array would name of c and value of 3 go to? — Alexander Staroselsky
– Alexander Staroselsky, Commented Oct 31, 2018 at 21:36
Can I ask why you would need ArrayOfObjects to be an array if it's only going to ever have a single object? — Alexander Staroselsky
– Alexander Staroselsky, Commented Oct 31, 2018 at 21:47
I'm using semantic ui and I want to render table rows dynamically. The table component has a jsx attribute tableData which must take an array of objects. Its passed into the renderBodyRow to be mapped — R.Lo
– R.Lo, Commented Oct 31, 2018 at 21:51

jordiburgos · Accepted Answer · 2018-10-31 22:00:47Z

1

You could just push an element to the current ArrayOfObjects.

ArrayOfObjects = this.state.ArrayOfObjects;
ArrayOfObjects.push({[name] : value});
this.setState({
    ArrayOfObjects
});

Or using the spread operator:

this.setState({
    ArrayOfObjects: [
        ...this.state.ArrayOfObjects,
        {[name] : value}
    ]
});

edited Oct 31, 2018 at 22:00

answered Oct 31, 2018 at 21:49

jordiburgos

6,3225 gold badges52 silver badges85 bronze badges

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

Comments

Alexander Staroselsky · Accepted Answer · 2018-10-31 22:07:29Z

0

Assuming that ArrayOfObjects is an always an array with single object and that you want to merge name/value into that object:

method(name, value) {
  // make a copy
  const ArrayOfObjects = [...this.state.ArrayOfObjects];
  // merge properties and set dynamic value
  ArrayOfObjects[0] = { ...ArrayOfObjects[0], [name]: value };

  this.setState({
    ArrayOfObjects
  });
}

Here is an example in action.

Hopefully that helps!

answered Oct 31, 2018 at 22:07

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

4 Comments

R.Lo Over a year ago

Yeah, I've tried using spread operator, same problem. Probably something wrong with my code. Thanks for your time!

Alexander Staroselsky Over a year ago

Did you review the linked example? You can add name/value and merge it into ArrayOfObjects without losing any properties or affecting other values in state. The key thing here is targeting the first element in the ArrayOfObjects array. It's different than ArrayOfObjects:[{ [name] : value }] as that will always replace the existing object entirely and not merge the properties.

R.Lo Over a year ago

Yup, I reviewed it. My method is only changing the state of the last name/value pair that's passed in. It may be because I'm using ref in my form to capture input value instead. I felt it was better to capture the value when the user submits the form rather than onChange. Is this wrong?

Alexander Staroselsky Over a year ago

I only added onChange because there wasn't any information provided regarding how method(name, value) is called or how it retrieves the values. It's just being used in the example as a mechanism to pass a name and value to method(name, value) in an interactive way to demonstrate the functionality of the setState() updating and merging state. All the onChange really does is pass values to method(name, value)`, it can really be ignored.

Collectives™ on Stack Overflow

Dynamically setState() with key nested state

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related