在数组状态下更新属性对象reactJS

Question

I have an array Object in my state named object so I have, in my state object in parent component something like:

object:[{id:1, name:"name"},{id:2, name:"name2"}];

And I have a select box in child component for every object in array and select is printed with this.props.object.map passed by props like:

var elements = this.state.object.map(function(element, k){
        return (

        <Components object={this.state.object} element={element} setPropertyElement={this.setPropertyElement} />         

        )
      }, this);

In child component I have select with change function like:

<select className="form-control" ref="name" defaultValue="j" onChange={this.change}>
   <option value="j">j</option>
   <option value="x">x</option>
</select>

So in this case I see in my page 2 elements with related select for change name. I have my function change .

change(event){
   this.props.setPropertyElement(this.props.element, event.target.value);
}

In my parent element so I have a function setPropertyElement :

setPropertyElement(element, value){

      element.name = value;
  }

My question is: My operations are correct or I'm modifing in wrong way state object? In this case How Can I change correctly value of property object in array?

Answer 1

You are in the right direction. As you already said, to change the state, call the setState({}), where you have to give in which element are you updating. In this case, if you use the spread operator it should be similar to this:

this.setState({object: [
     ...this.state.object.filter(x => element.ID !== x.ID),
     { id: element.id, name: element.name }
]})

Answer 2

Try this:

let editableComparatorIndexes = [...this.state.ids];
   editableComparatorIndexes[i] = 1;
   this.setState({editableComparatorIndexes});