Q:

React: Http request response not displaying in render()

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;

A:

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.

