ReactJS - Using .setState to change nested values

Question

I'm attempting to set the state of a specific element (a checkbox) so that I can later pass this data back to a parent component that will in turn update a JSON object. I am able to set the state of higher level elements but I am not understanding how to access the nested values.

How do I use .setState to set the state of a specific element? Such as this.state.data[0].checked

I'm attempting to set the state with something like this which would only update data at the moment:

handleChange: function(event) {
    this.setState({data: event.target.value}});
  },

could you share some codes?

Praveen Prasad
– Praveen Prasad

2016-08-13 14:11:41 +00:00
Commented Aug 13, 2016 at 14:11 — Praveen Prasad
– Praveen Prasad, Commented Aug 13, 2016 at 14:11

Community · Accepted Answer · 2017-05-23 12:22:58Z

1

It looks like you could use the immutability helpers, and if you are using a numerical / dynamic key, you should look at my question here.

Your solution would look something like this:

handleChange: function(index, event) {
  var data = React.addons.update(this.state.data, {
   [index]: {
     checked: {$set: event.target.checked}
   }
  });
  this.setState({
    data: data
  })
},

Notice the use of e.target.checked and not e.target.value for checkboxes to get the boolean state and not the value associated with the checkbox.

This is how you'd attach your function with the i index you'd have to set beforehand:

onChange={this.handleChange.bind(this, i)}

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Aug 13, 2016 at 14:32

tirdadc

4,7133 gold badges40 silver badges47 bronze badges

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

1 Comment

NightMarcher Over a year ago

this is exactly what i was looking for. I updated your post with a couple of small syntax edits and had to throw in that comma at the end to make SO happy. Thanks!

Collectives™ on Stack Overflow

ReactJS - Using .setState to change nested values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest