In react, how to update specific property of an array state?

Question

I have a state of an array like this:

constructor(props){
   super(props)
   this.state={
      test_steps: []
   }
}

and it holds the following properties:

test_steps: [
    {
        description: "Test desc"
        expected_results: "Test exp. results"
        other_info: "test other info"
        status: true
        step_number: "1"
        _id: {$oid: "1234565894"}
    }
]

If I wanted to update only **other_info** property on this state, how will I achieve that?

Possible duplicate of React: How do I update state.item[1] on setState? (with JSFiddle) — azium
– azium, Commented Aug 16, 2018 at 22:42

Vynart · Accepted Answer · 2018-08-17 02:47:08Z

1

You first need to get the your state and store it in variable. Then you loop the value and modify it. After that just set the state.

let test_steps = this.state.test_steps;
    test_steps.map((test)=>{
    test.other_info = "YOUR_UPDATED_INFO";
    return test;
    });

this.setState({test_steps});

answered Aug 17, 2018 at 2:47

Vynart

1054 bronze badges

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

Comments

devserkan · Accepted Answer · 2018-08-16 23:03:01Z

1

Since there is one element in your array you can use spread syntax, then change the related property.

this.setState(prevState => ({
      test_steps: [
        {
          ...prevState.test_steps[0],
          other_info: "foo"
        }
      ]
}));

answered Aug 16, 2018 at 23:03

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

Collectives™ on Stack Overflow

In react, how to update specific property of an array state?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related