javascript - Render a React component from a button click event -

i'm developing small react application consist of chart component , other components. chart component separate file/component/child component.when click button in main container calls promise (using axio) , returns data response. response data set states , state passed chart component props.but chart doesn't load. because chart has being loaded, since initial states empty chart empty. there way of rendering chart component after promise returns data?

this code

the button click event

  clickme = () =>{           axios.get('http://xyzsdsd.com/abc')             .then((response)=>{                 this.setstate({                  tags:response.data                });                 console.log(this.state.tags);              }).catch((err)=>{                console.log(err);             });     } 

the render function

  render(){         return(         <div>          <othercomponents/>          <chart data={this.state.tags}/>         </div>           ); } 

add condition in render, render chart component when state.tags object valid. on initial render, chart not rendered. when ajax call returns , setstate() called, render() called again non-null state.tags , render chart.

render(){   let chart;    if (this.state.tags) {     chart = <chart data={this.state.tags}/>;   }    return (     <div>       <othercomponents/>       {chart}     </div>   ); }