title: call function on button click reactjs
body: <p>I am trying to show different html body on same tab having two buttons. I have two buttons. I want to show different html on two different buttons, for doing this i have added two functions named <code>xyz</code> and <code>abc</code> for rendering html. But I'm not getting how to call this functions. For doing this I have added one variable flag. And I am not getting how to use this flag with function <code>xyz</code> and <code>abc</code>. It should be something like if it is <code>abc</code> button should invoke <code>abc</code> function with <code>streamLogs</code> function and if it is <code>xyz</code> button it should invoke <code>xyz</code> function with <code>onCloud</code> function. This <code>onCloud</code> and <code>streamLogs</code> function contains api call of Java.</p>
  
  <pre><code>export default class ResourceLog extends React.Component{
  constructor(props) {
      super(props);
      this.state = {
          streamData: {},
          streamMessage : "",
          interval : 5000,
          showDatePicker:false,
          selectionConfigs : [
              {name:"1 Hr",cssClass:"btn btn-info btn-sm",duration:300,startTime:-1,endTime:-1,diff:3600},
              {name:"3 Hr",cssClass:"btn btn-info btn-sm",duration:300,startTime:-1,endTime:-1,diff:10800},
          ],
          params : {},
          flag: true
      }
  }
  streamLogs = ()=&gt; {
         if(this.props.resource.status === "ACTIVE"){
              this.setState({"streamMessage":"loading logs.."})
                 axios.instance.get("api/resources/" + this.props.resource.id+"/log/stream")
                 .then((resp) =&gt; {
                     this.setState({streamData : resp.data,streamMessage:""})
                 }).catch(err =&gt; {       
                     this.setState({streamMessage:""})
                     NotificationManager.error("unable to fetch logs")
                 })              
         }else{
              this.setState({"streamMessage":"Resource is not Active cannot fetch/stream logs..."})              
         }
  }
  onCloud = () =&gt;{
  
      let endTime = this.state.params.endTime;
      if(endTime === -1){
          endTime = new Date().getTime();
      }
      let startTime = this.state.params.startTime;
      if(startTime === -1){
          startTime = endTime - this.state.params.diff*1000;
      }
  
      let filter = this.state.params.duration;
      if(filter === -1){
          filter = "";
      }
  
      let params = Object.assign({},{startTime:startTime,endTime:endTime,filter:period});
  
      this.setState({"streamMessage":"loading stats.."});
         axios.instance.get("api/resources/" + this.props.resource.id+"/cloud/log",{params:params})
         .then((resp) =&gt; {               
             this.setState({data : resp.data,streamMessage:""})
         }).catch((error) =&gt; {
              NotificationManager.error(`Failed to fetch stats-`, "Error")
            })
  }
  onChange = () =&gt; {
      const flag = this.state.flag;
      let button;
  
      if (flag) {
          button = &lt;abc onClick={this.streamLogs} /&gt;;
      } else {
          button = &lt;xyz onClick={this.onCloud} /&gt;;
      }
  }
  render(){   
      return (
          &lt;div&gt;
              &lt;button onClick={this.streamLogs}&gt;abc&lt;/button&gt;
              &lt;button onClick={this.onCloud}&gt;xyz&lt;/button&gt;
          &lt;/div&gt;
      )
  }
  abc = () =&gt;{
      return (
              &lt;div className="row"  style={{"margin":"15px"}}&gt;
                  &lt;div className="col-md-12"&gt;
                      &lt;h3 style={{display:"inline"}}&gt;Logs
                          &lt;span style={{marginLeft:"10px", cursor:"pointer"}} title={"Download"}&gt;&lt;a target="_blank" href={`api/resources/${this.props.resource.id}/log`}&gt;&lt;i className="fa fa-download"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/span&gt;
                          &lt;span style={{marginLeft:"10px", cursor:"pointer"}} title={"Refresh"}&gt;&lt;i onClick={this.streamLogs} className="fa fa-refresh"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;div className="clearfix"/&gt;
                  &lt;br /&gt;
                  &lt;div className="col-md-12"&gt;
                      &lt;div&gt;{this.state.streamMessage}&lt;/div&gt;
                      {mapObject(this.state.streamData,(k,v) =&gt; &lt;div&gt;&lt;pre&gt;{v.join("\n")}&lt;/pre&gt;&lt;/div&gt;)}
                  &lt;/div&gt;
              &lt;/div&gt;
      );
  }
  xyz = () =&gt;{
      return(
          &lt;div className="row" style={{margin:"20px",textAlign:"center"}}&gt;
              &lt;div&gt;
                  &lt;span className={this.state.selectionConfigs[0].cssClass} onClick={() =&gt;this.updateStatsConf(this.state.selectionConfigs[0])}&gt;{this.state.selectionConfigs[0].name}&lt;/span&gt;
                  &lt;span style={{marginLeft:"10px"}} className={this.state.selectionConfigs[1].cssClass} onClick={() =&gt;this.updateStatsConf(this.state.selectionConfigs[1])}&gt;{this.state.selectionConfigs[1].name}&lt;/span&gt;
                  &lt;span style={{marginLeft:"10px"}} className={this.state.selectionConfigs[2].cssClass} onClick={() =&gt;this.updateStatsConf(this.state.selectionConfigs[2])}&gt;{this.state.selectionConfigs[2].name}&lt;/span&gt;
              &lt;/div&gt;
  
          &lt;div className="row" style={{margin:"20px"}}&gt;
              &lt;div className="col-md-12"&gt;
                      &lt;div&gt;{this.state.streamMessage}&lt;/div&gt;
                      {mapObject(this.state.streamData,(k,v) =&gt; &lt;div&gt;&lt;pre&gt;{v.join("\n")}&lt;/pre&gt;&lt;/div&gt;)}
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      );
  }
  </code></pre>
  
  <p>}</p>