How to change state in ReactJS?

Question

I am trying to change the state, but it is not working.

This is my state in App.js:

class App extends React.Component {    
state = {
    one: [
      {
    id: 1,
    sum: "400",
      }
    ],
    two: {
      title: "test",
      number: "0",
    }
  };

And here is my function:

Change = (value) => {
    this.setState({ number: "300" });

But the number does not change. I have also tried:

Change = (value) => {
    this.setState({ two.number: "300" });

But this is not working either. Can someone help me?

You should not have nested objects in the state, react won't rerender. — Taylor A. Leach, Sep 18 '19 at 19:16
`two.number` won't work. First one could work, but I don't see any code invoking it — Tomasz Bubała, Sep 18 '19 at 19:16
Actually first one won't work either. There is no `number`. There is only `one` and `two` — Tomasz Bubała, Sep 18 '19 at 19:19

score 3 · Answer 1 · answered Sep 18 '19 at 19:19

3

this.setState(prevState => ({ 
  two: { 
    ...prevState.two, 
    number: "300" 
  } 
}));

answered Sep 18 '19 at 19:19

Taki

17,320
4
26
47

score 2 · Answer 2 · answered Sep 18 '19 at 19:21

2

You can try something like this.

var two = { ...this.state.two }
two.number = "300";
this.setState({two})

Craete a dummy object to handle your state object, and then you set it into the state using the setState

answered Sep 18 '19 at 19:21

Diego Bascans

1,083
1
6
14

score 0 · Answer 3 · answered Sep 18 '19 at 19:20

0

You are not properly accessing the nested property. This has been answered here

How to update nested state properties in React

answered Sep 18 '19 at 19:20

Matthew Jenkins

1
2

How to change state in ReactJS?

3 Answers3