title: Unable to render the button selected in react
body: <p>Can we have two functions inside an onclick event? Here's my code:</p>
  <pre><code>import React from 'react';
  
  class Counter extends React.Component {
      state = {
          count: 0,
          inc: 'Increment',
          dec: 'Decrement',
          rst: 'Reset',
      };
  
      styles = {           //CSS styles into Js objects
          fontSize: 50,
          fontWeight: 'bold',
          margin: 25,
      };
  
      buttonstyle = {
          padding: 10,
          margin: 15,
          fontSize: 25,
      };
  
      buttonChange = () =&gt; {
          if (this.state.button.id === 1)
            return &lt;p&gt;Increment&lt;/p&gt;
          else if (this.state.button.id === 2)
              return &lt;p&gt;Decrement&lt;/p&gt;
          else
              return &lt;p&gt;Reset&lt;/p&gt;
      }
  
      addCounter = () =&gt; {
          this.state.count++;
          this.setState({ count: this.state.count });
      }
  
      decrementCounter = () =&gt; {
          if (this.state.count &gt; 0) {
              this.state.count--;
              this.setState({ count: this.state.count })
          }
      }
  
      resetCounter = () =&gt; {
          this.state.count = 0;
          this.setState({ count: this.state.count });
      }
  
      render() {
  
          let classes = &quot;badge m-2 badge-warning&quot;;
          if (this.state.count === 0) {
              classes = &quot;badge badge-warning m-2&quot;;
          }
          else {
              classes = &quot;badge badge-success m-2&quot;;
          }
          return (
  
              &lt;div style={{ textAlign: 'center' }}&gt;
                  &lt;br&gt;&lt;/br&gt;
                  &lt;span style={this.styles} className={classes}&gt;{this.state.count}&lt;/span&gt;
                  &lt;br&gt;&lt;/br&gt;
                  &lt;div&gt;
                      &lt;button style={this.buttonstyle} className=&quot;btn btn-primary btn-sm&quot; onClick={this.addCounter} id={1}&gt;{this.state.inc}&lt;/button&gt;
                      &lt;button style={this.buttonstyle} className=&quot;btn btn-primary btn-sm&quot; onClick={this.decrementCounter} id={2}&gt;{this.state.dec}&lt;/button&gt;
                      &lt;button style={this.buttonstyle} className=&quot;btn btn-primary btn-sm&quot; onClick={this.resetCounter} id={3}&gt;{this.state.rst}&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;br&gt;&lt;/br&gt;
                  &lt;div className=&quot;container&quot;&gt;
                      You have pressed &lt;span style={{ background: 'black', marginRight: 5, color: 'greenyellow' }}&gt;{this.buttonChange} &lt;/span&gt; button. //I want to implement the button change here
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Counter;
  </code></pre>