Render a React component from a button click event
<p>I'm developing a small react application that consist of a chart component and some other components. The chart component is a separate file/component/child component.When i click the button in the main container it calls a promise (using axio) and it returns some data as response. This response data is set as states and that state is passed to the chart component as props.But the chart doesn't load. This is because the chart has already being loaded, since the initial states where empty the chart is also empty. Is there any way of rendering the chart component only after the promise returns data?</p>

<p>this is my code</p>

<p>the button click event</p>

<pre><code>  ClickMe = () =&gt;{

         axios.get('http://xyzsdsd.com/abc')
            .then((response)=&gt;{

               this.setState({
                 tags:response.data
               });

               console.log(this.state.tags);

            }).catch((err)=&gt;{

              console.log(err);
            });


  }
</code></pre>

<p>the render function</p>

<pre><code>  render(){
        return(
        &lt;div&gt;
         &lt;otherComponents/&gt;
         &lt;chart data={this.state.tags}/&gt;
        &lt;/div&gt;

         );
}
</code></pre>