How can I set a a state variable to an object in react?

Question

I have this empty state variable called data like this data: {} and when I receive a json object from my backend, I want the empty object to be the object I passed in through my backend. Say my json I received from my backend is this:

{
  "data": {
    "keywords": {
      "Mrs. Johnson": 87
    }, 
    "score": 67
  }
}

How do I make it so that data variable in my this.state gets updated to this:

"data": {
      "data": {
        "keywords": {
          "Mrs. Johnson": 87
        }, 
        "score": 67
      }
    }

so I can access elements like the score inside it using this.state.data.data.score?

Here is my react code:

class Test extends Component {
    constructor() {
        super()
        this.state = {
          data: {}
        }
    }

    const options = {
        method: "POST",
        headers: {
            'Content-Type': 'application/json;charset=utf-8', 
        },
        body: JSON.stringify(this.state.text) // Irrelevant
    };
    console.log("hi")
    fetch("http://127.0.0.1:5000/", options)
        .then(response=> response.text())
        .then(json => this.setState({data: json})) // This doesn't work

}

Hanchen Jiang · Accepted Answer · 2022-01-20 23:57:30Z

2

You want the response to be parsed into a json object instead of text:

fetch("http://127.0.0.1:5000/", options)
  .then(response=> response.json()) //notice the change here
  .then(json => this.setState({data: json}))

answered Jan 20, 2022 at 23:57

Hanchen Jiang

2,6702 gold badges12 silver badges21 bronze badges

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

2 Comments

Soccerball123 Over a year ago

When I changed it to json(), I tried console.log(this.state.data)ing the data after the fetch request and then statements, and the object showed up empty. Do you know why this happens and how I can fix it?

Hanchen Jiang Over a year ago

setState does not finish setting the state synchronously. You are probably running into the situation where you printed this.state.data and then setState finishes setting the state. Try printing out the state at the place you want to use it. It should update eventually.

Collectives™ on Stack Overflow

How can I set a a state variable to an object in react?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related