title: Increment and Decrement button via Material UI ButtonGroup
body: <p>I want to create a increment / decrement button with material ui ButtonGroup. the button is like this image at first.</p>
  
  <p><img src="https://i.stack.imgur.com/mk1ao.png" alt="The first part of ButtonGroup"></p>
  
  <p>When user clicked on the button, the second part of ButtonGroup will show (Like Image Below).</p>
  
  <p><img src="https://i.stack.imgur.com/cmnlH.png" alt="Second part of the ButtonGroup"></p>
  
  <p>how can I achieve this? Please Help.</p>
  
  <p>thanks in advance.</p>
  
  <h1><strong>Code</strong></h1>
  
  <pre><code>import React from "react";
  import Grid from "@material-ui/core/Grid";
  import Button from "@material-ui/core/Button";
  import ButtonGroup from "@material-ui/core/ButtonGroup";
  
  class GroupedButtons extends React.Component {
    state = { counter: 0 };
  
    handleIncrement = () =&gt; {
      this.setState(state =&gt; ({ counter: state.counter + 1 }));
    };
  
    handleDecrement = () =&gt; {
      this.setState(state =&gt; ({ counter: state.counter - 1 }));
    };
    render() {
      const Btn = (
       &lt;&gt;
        &lt;Button disabled&gt;{this.state.counter}&lt;/Button&gt;
        &lt;Button onClick={this.handleDecrement}&gt;-&lt;/Button&gt;
       &lt;/&gt;
      );
  
      return (
        &lt;ButtonGroup size="small" aria-label="small outlined button group"&gt;
          &lt;Button onClick={this.handleIncrement}&gt;+&lt;/Button&gt;
          {this.state.counter &gt; 0 &amp;&amp; Btn}
        &lt;/ButtonGroup&gt;
      );
    }
  }
  
  export default GroupedButtons;
  </code></pre>
  
  <p>something like code above. but it doesn't work.</p>