Update property object in array state 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?

What is this.props.element? Is setPropertyElement also passed down as a prop? Please update your <Component object={this.state.object}> line above to reflect this. — Chris
– Chris, Commented Feb 15, 2017 at 22:38
Hello Chris, thankyou, I Edited my questions, the props.element is a element of state object passed in components by .map — LorenzoBerti
– LorenzoBerti, Commented Feb 15, 2017 at 22:42
What about this.props.setPropertyElement? It doesn't look like it's passed down as a prop from the parent to the child. — Chris
– Chris, Commented Feb 15, 2017 at 22:43
yest setPropertyElement is a method of parent passed by props I edited my question — LorenzoBerti
– LorenzoBerti, Commented Feb 15, 2017 at 22:45
@LorenzoBerti immutable is not required. When you change the value somewhere in this.state, React does not noticed that state is changed. That's why you need a this.setState. — jiyinyiyong
– jiyinyiyong, Commented Feb 16, 2017 at 8:37

juanecabellob · Accepted Answer · 2017-02-15 23:29:13Z

5

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 }
]})

edited Feb 15, 2017 at 23:29

answered Feb 15, 2017 at 23:18

juanecabellob

4543 silver badges14 bronze badges

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

2 Comments

LorenzoBerti Over a year ago

Hello juncab, thanks, in your method you use rightly set state, but in my method above I don't use setState but Simply assign value to property, so why also my method is correct?

juanecabellob Over a year ago

If you could update your post and add the whole code, I could tell you why it works. It's hard to tell just by seeing those pieces of code.

Sujal Patel · Accepted Answer · 2017-11-16 06:50:43Z

0

Try this:

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

answered Nov 16, 2017 at 6:50

Sujal Patel

2,5402 gold badges21 silver badges40 bronze badges

Collectives™ on Stack Overflow

Update property object in array state reactJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related