React: Http request response not displaying in render()

Question

Can someone tell me what is wrong with my code below? I am making an HTTP request to Darksky API using 'superagent' and then trying to display the result in an h2 which isn't working. I tried logging it to console and it works perfectly but if I am trying to display it on the page it doesn't work. Could someone help me out pls, I am new to react and not sure what is going wrong.

import React, { Component } from "react";
import "./Body.css";
import Request from "superagent";

class Body extends Component {
  constructor() {
    super();
    this.getData = this.getData.bind(this);
  }

  getData() {
    var url = this.props.apiUrl;
    Request.get(url)
      .then(response => {
        return(JSON.stringify(response.currently.summary));
      })
      .catch(error => {});
    }

  render() {
    <div>
      <h2>
        {this.getData()}
      </h2>
    </div>
  }
}

export default Body;

This is the other file where I am importing Body.js :-

import React, { Component } from "react";
import Body from "./Body";
import "./App.css";

class App extends Component {
  render() {
      return <Body
apiUrl="https://api.darksky.net/forecast/42a9693aecf45c358afbda0022c5cf65/28.5355,77.3910" />;
  }
}

export default App;

Andrii Starusiev · Accepted Answer · 2017-08-11 05:46:25Z

2

You need to set your data in the state of the component, it fire new render:

  constructor() {
    super();
    this.getData = this.getData.bind(this);
    this.state = {data: {}}
  }

  componentDidMount() {
    var url = this.props.apiUrl;
    Request.get(url)
      .then(response => this.setState({data: JSON.stringify(response.currently.summary)}))
      .catch(error => {});
    }
render(){
    console.log("your data", this.state.data);
    return <div>test</div>;
}

And work with this data with this.state.data. I advise you to change getData() function to componentDidMount mehtod.

edited Aug 11, 2017 at 5:46

answered Aug 11, 2017 at 5:28

Andrii Starusiev

7,7842 gold badges31 silver badges40 bronze badges

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

2 Comments

Manav Saxena Over a year ago

I made these changes and then added this code to my render function but it still doesn't work. <div> {this.getData()} <h2> {this.state.data} </h2> </div>

Manav Saxena Over a year ago

Ok I managed it. I had to set the data to response.body.currently.summary instead of response.currently.summary.

Jude Niroshan · Accepted Answer · 2017-08-11 05:31:16Z

2

You should use a life cycle method(componentDidMount) with the use of state. It is recommended to make HTTP calls inside the componentDidMount() method.

constructor() {
    super();
    this.state = {
                   result: ''
                  };
}

componentDidMount(){

    var url = this.props.apiUrl;
    Request.get(url)
      .then(response => {

             this.setState({
                 result: JSON.stringify(response.currently.summary)
             });
      })
      .catch(error => {});
}

render() {
    <div>
      <h2>
        {this.state.result}
      </h2>
    </div>
}

answered Aug 11, 2017 at 5:31

Jude Niroshan

4,4809 gold badges43 silver badges68 bronze badges

Collectives™ on Stack Overflow

React: Http request response not displaying in render()

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