Cannot print string using ReactJS

Question

I'm trying to get data from a web page and print the contents to screen. Here is the code for HTTP get request:

https.get('https://jsonplaceholder.typicode.com/users', (resp) => {
      let data = '';

      // A chunk of data has been received.
      resp.on('data', (chunk) => {
          data += chunk;
      });

      // The whole response has been received. Print out the result.
      resp.on('end', () => {
          for (let i = 0; i < JSON.parse(data).length; i++)
              cities += JSON.parse(data)[i].address.city + '\n';
          console.log(cities);
      });

At the code below i cannot print it to screen. I searched on Google but didn't come up with a solution.

let printing = "All users data:";
  return <div className="App">
      <header className="App-header">
          <p>
              {printing}
          </p>
          <p>
              {cities}
          </p>
      </header>
  </div>;

Here i can print the printing string but i can't print cities string.What is the reason for that? (Full code can be found at https://github.com/ezinal/reacttask/blob/master/src/App.js (39 lines))

React won't rerender a component if there is not a state or props change. I think you should have the logic of fetching the data elsewhere and pass them to the component via props. — Alex G
– Alex G, Commented Jan 19, 2019 at 8:05

Ntokozo Zwane · Accepted Answer · 2019-01-20 15:25:27Z

2

You are updating the state outside of the http request completion callback, so the state will be updated before the http request has completed i.e this.setState is called immediately after the http request is started, not after the request is completed. You need to move this.setState({cities : getCities}) into the resp.on('end', ...) callback, like this:

resp.on('end', () => {
    for (let i = 0; i < JSON.parse(data).length; i++)
        getCities += JSON.parse(data)[i].address.city + '\n';
    console.log(getCities);
    this.setState({cities : getCities}); // <-- update state here once http request has completed
});

edited Jan 20, 2019 at 15:25

answered Jan 20, 2019 at 14:27

Ntokozo Zwane

1,7621 gold badge15 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

Cannot print string using ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related