title: correct way to call api using react
body: <p>I have a react code as below which basically creates a treemap:</p>
  
  <pre><code>class ChartModal extends Component{
     constructor(props){
        super(props)
  }
  callApi(){
  
    fetch(someurl)
    .then((result) =&gt; {
  
      return result.json();
    }).then((jsonResult) =&gt; {
      console.log(jsonResult);
    })
  }
  render(){
    return(
      &lt;Modal
              onOk={() =&gt; this.props.toggleVisibility()}
              onCancel={() =&gt; this.props.toggleVisibility()}
              visible={this.props.isVisible}
              okText={'ok'}
              cancelText={'cancel'}
              confirmLoading={false}
              title="Intent distribution chart"
          &gt;
              &lt;h1&gt;HOWDY&lt;/h1&gt;
              &lt;TreeMap
                  data =  {this.callApi()}//this is where i want the data returned by apicall
                  width={400}
                  valueUnit={'count'}
              /&gt;
          &lt;/Modal&gt;
      )
    }
  }
  </code></pre>
  
  <p>Now I want the data returned by api call to be used inside the <code>tree map</code> component, but the way I am doing it now doesn't seem to be working.
  When I run this, the data in the <code>tree map</code> comes out to be null though I expect a <code>json</code> returned by <code>api call</code> to be there.</p>