Update nested object values by array notation in reactjs state

Question

I have some generic code that attempts to update specific states. It's possible to access an object by the keys in an array, e.g:

let x = {person: { name: "Dennis"}} 
console.log(x["person"]["name"])

In react, it is possible (and often used in input validation), to access a specific state-key by array, e.g:

//event.target.name = input field property name="firstName"
this.setState({
    [event.target.name]: event.target.value
});

Which would update this.state.firstName to the inputs value.

I am trying to bind nested complex objects to inputs, to avoid having translation functions. So if my state contains { person: {name : "" } } I want to access it dynamically by this.state["person"]["name"] - which works. I want to use the same notation in setState, because then I can bind my nested state-data to inputs like this: <input name="person.name" /> and in my change handler I can look for periods: if(ev.target.name.split("."))...

However, I can't seem to access the state in the same way in setState, because it's an object, so:

const args = ev.target.name.split(".");
this.setState({
    [args[0]][args[1]]: ev.target.value
});

Is there anyway to do this?

You can do it like in the following question stackoverflow.com/questions/43040721/… — Shubham Khatri
– Shubham Khatri, Commented Apr 30, 2018 at 11:42

Dennis · Accepted Answer · 2018-04-30 13:45:59Z

1

Turns out this was a bit more complicated than initially thought. By using Object.assign all nested objects kept their immutable properties, which made it impossible to change them. I had to make a hard copy of the state, in order to change it. With the use of _set from lodash.set it could be done in very few lines:

//Create a hard-copy of the state
let stateCopy = JSON.parse(JSON.stringify(this.state));

//Update the value in the state with the input value
_set(stateCopy, ev.target.name, ev.target.value);

//Set the state with the changed value
this.setState(stateCopy);

Edit: Only downside is that currently I copy the entire state in the setState() and not just the delta values.

edited Apr 30, 2018 at 13:45

answered Apr 30, 2018 at 13:38

Dennis

9494 gold badges16 silver badges32 bronze badges

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

Comments

trixn · Accepted Answer · 2018-04-30 11:56:00Z

0

I like to use ramda for this. It would look like

this.setState(R.assocPath(args, ev.target.value))

edited Apr 30, 2018 at 11:56

trixn

16.4k2 gold badges40 silver badges59 bronze badges

answered Apr 30, 2018 at 11:54

Tiago Coelho

5,10313 silver badges17 bronze badges

Comments

Jonas Wilms · Accepted Answer · 2018-04-30 12:00:46Z

0

Its a little more complicated, you could deep copy the objects:

 const args = ev.target.name.split(".");
 let result = {};
 const root = result;
 let pos = this.state;
 const last = args.pop();
 for(const arg of args) {
   Object.assign(result, pos);
   result = result[arg] || (result[arg] = {});
   pos = pos[arg] || {};
 }
 result[last] = evt.target.value;
 this.setState(root);

answered Apr 30, 2018 at 12:00

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

1 Comment

Dennis Over a year ago

At first I thought it didn't work because you used pop (which effectively removes the last element from the stack, and so the iteration only loops over the first one), but I have problems with setting read-only properties as well, when result is reassigned after the first iteration.

Collectives™ on Stack Overflow

Update nested object values by array notation in reactjs state

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related