Setting set in object nested 3 level deep

Question

Hi guys I have a problem and from start I will mention that I already tried thisand this

My situation is as follows. I have API, that sends me

Root is in the component state!

Root: {
  RootVal1: {
    Prop1: '',
    Prop2: '',
    Prop3: '',
  }
  RootVal2: [
    PropObj1: {
      NestedProp1: '',
      NestesPropObj: {
        NestedEvenMoreProp1: '',
        NestedEvenMoreProp2: '',
        NestedEvenMoreProp3: ''
      }
    },
    PropObj2: {
      NestedProp1: '',
      NestesPropObj: {
        NestedEvenMoreProp1: '',
        NestedEvenMoreProp2: '',
        NestedEvenMoreProp3: ''
      }
    },
    PropObj3: {
      NestedProp1: '',
      NestesPropObj: {
        NestedEvenMoreProp1: '',
        NestedEvenMoreProp2: '',
        NestedEvenMoreProp3: ''
      }
    },
  ]
}

How can I update Prop1, Prop2, Prop3, NestedEvenMoreProp1, NestedEvenMoreProp2, NestedEvenMoreProp3 with setState? The last constraint is that I cannot change the name of root(i cannot rename it to newRoot etc.)

What I have tried is to call this function:

  /**
   * @summary update state using immutable object
   * @param {Object} name of key and value for update
   * @returns {string} Promise that returns
   */
  updateStateHelper = target => new Promise((resolve) => {
    const updatedState =
      update(this.state[target.name], { $merge: { [target.name]: target.value } });
    this.setState(prevState => ({
      ...prevState,
      updatedState,
    }), () => resolve(this.state[target.name]));
  });

As so:

// data[0] and data[1] is just copy of RootVal2 and RootVal1, with changed values. 
data[0]
data[1]

const root = Object.assign({}, this.state.root);
root.RootVal2 = [...data[0].RootVal2];
root.RootVal1 =  {...data[1]};
//Here root displays edited 
console.log(root);

this.updateStateHelper({name: 'root', value: root,})
  .then(() => {
    //Here root displays without the edit
    console.log(this.state.root);
    resolve('Success');
  });

Please show a snippet of what you tried. The second link you mention should have answered your question so I guess you are missing something — Logar, Sep 07 '18 at 09:37
@Trefl sorry but I don't have time to play with it right now, Here is a quick example of how to update your state, hope it'll be enough for you : https://repl.it/repls/CourteousAngelicOctagon — Logar, Sep 07 '18 at 09:52

Darkilen · Accepted Answer · 2018-09-07T10:03:04.797

0

You can use Spead Operator.

Example (to update Prop1, Prop2 and Prop3) :

this.setState({
  Root:
    ...this.state.Root, 
    RootVal1: {
      ...this.state.Root.RootVal1,
      Prop1: "Prop1 value here",
      Prop2: "Prop2 value here",
      Prop3: "Prop3 value here"
    }
  }
);

More informations here (thanks to @TelmosDias)

edited Sep 07 '18 at 10:03

answered Sep 07 '18 at 09:53

Darkilen

571
4
18

Sorry i forgot to mention root has to have the same name, after update. So I cannot rename it to newRoot. – Trefl Sep 07 '18 at 09:55
Man, read OP's question. While your sample is correct the link you give is already in the question and OP said he tried it, so he's missing something somewhere but you're not helping him with that – Logar Sep 07 '18 at 09:56
You do not have to rename, you can just overwrite your Root object. @Logar Yes, he already link this anwser in his question but he didn't apply something like this (or he didn't mention he did, or i miss something) – Darkilen Sep 07 '18 at 09:58
@Darkilen well, basically you just copy pasted the SO link with modified data, which could be fine in some cases even if it'd be better to mark it as a dupe. But if the other answer didn't help him, I don't see how this one would – Logar Sep 07 '18 at 10:04

Setting set in object nested 3 level deep

1 Answers1