title: How to let the user input number and increase it with a button in React JS
body: <p>I want to let the user input the <code>clicks</code> times and increase it with a button, but I don't know-how.
  Here's the code.</p>
  
  <pre><code>import React, { Component } from "react";
  
  class Click extends Component {
    constructor(props) {
      super(props);
      this.state = {
        clicks: 0,
        show: true,
      };
    }
  
  
    IncrementItem = () =&gt; {
      this.setState({ clicks: this.state.clicks + 1 });
    };
  
    DecreaseItem = () =&gt; {
      if (this.state.clicks &lt; 1) {
        this.setState({
          clicks: 0,
        });
      } else {
        this.setState({
          clicks: this.state.clicks - 1,
        });
      }
    };
    ToggleClick = () =&gt; {
      this.setState({ show: !this.state.show });
    };
    handleChange(event) {
      this.setState({ clicks: event.target.value });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;button onClick={this.DecreaseItem}&gt;Click to decrease by 1&lt;/button&gt;
          &lt;button onClick={this.IncrementItem}&gt;Click to increase by 1&lt;/button&gt;
  
          &lt;button onClick={this.ToggleClick}&gt;
            {this.state.show ? "Hide number" : "Show number"}
          &lt;/button&gt;
          {this.state.show ? ( &lt;input type="number" name="clicks" value={this.state.clicks}onChange = {this.handleChange.bind(this)}/&gt;) : (" ")}
        &lt;/div&gt;
      );
    }
  }
  
  export default Click;
  </code></pre>