ReactJS setState with multiple nested arrays

Question

Consider the following structure:

this.state = {
  States: [{
    Abbreviation: "MA",
    Cities: [{
      ID: 1,
      Name: "Boston",
      PropertyToUpdate: null
    },
    {
      ID: 2,
      Name: "Springfield",
      PropertyToUpdate: null
    }]
  }]
}

Given a city ID and a value, I need to update the PropertyToUpdate property to the value. So I would have a function that looks like:

handleUpdateProperty(cityID, newValue){
  // Do some things
  this.setState({...});
}

I have done some reading on immutable helpers but I'm not sure how to handle the two layers of nesting. I think it should look something like:

var newState = React.addons.update(
  this.state.States[indexOfState].Cities[indexOfCity],
  {PropertyToUpdate: {$set: newValue}}
);

...but this is not quite the right syntax. So how can I keep my state immutable, but still update this nested property of an array item?

Rodrigo Siqueira · Accepted Answer · 2015-09-09 20:16:54Z

9

You would use it like this

var newState = React.addons.update(this.state, {
  States: {
    [indexOfState]: {
      Cities: {
        [indexOfCity]: {
          PropertyToUpdate: {
            $set: newValue
          }
        }
      }
    }
  }
})

See nested collections.

answered Sep 9, 2015 at 20:16

Rodrigo Siqueira

1,1548 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

ReactJS setState with multiple nested arrays

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related