title: Why is input not returning anything in React?
body: <p>I'm a beginner in React, and I'm trying to make small apps with it. In fact, this is my first app which I'm making in React, and I'm stuck in a problem.</p>
  <p>I'm making a small app that will take in numbers and add, subtract, or multiply them, i.e a calculator. Here is the code.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const { Component } =  React;
  
  class App extends React.Component {
    state = {
      num1: 0,
      num2: 0,
      answer: 0,
      equation: "",
    };
  
    handleAdd1 = (number) =&gt; {
      this.setState({ num1: number });
    };
  
    handleAdd2 = (number2) =&gt; {
      this.setState({ num2: number2 });
    };
  
    handleClear = () =&gt; {
      this.setState({ num1: 0, num2: 0, answer: 0 });
    };
  
    handlePlus = (sign) =&gt; {
      switch (sign) {
        case "+":
          this.setState({ answer: this.state.num1 + this.state.num2 });
          break;
  
        case "-":
          this.setState({ answer: this.state.num1 - this.state.num2 });
          break;
  
        case "x":
          this.setState({ answer: this.state.num1 * this.state.num2 });
          break;
      }
    };
  
    handleInput = (event) =&gt; {
      this.setState({ equation: event.target.value });
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;div&gt;
            &lt;h1&gt;{this.state.num1}&lt;/h1&gt;
            &lt;button onClick={() =&gt; this.handleAdd1(1)}&gt; 1 &lt;/button&gt;
            &lt;button onClick={() =&gt; this.handleAdd1(2)}&gt; 2 &lt;/button&gt;
            &lt;button onClick={() =&gt; this.handleAdd1(3)}&gt; 3 &lt;/button&gt;
            &lt;button onClick={() =&gt; this.handleAdd1(4)}&gt; 4 &lt;/button&gt;
            &lt;button onClick={() =&gt; this.handleAdd1(5)}&gt; 5 &lt;/button&gt;
            &lt;button onClick={() =&gt; this.handleAdd1(6)}&gt; 6 &lt;/button&gt;
            &lt;button onClick={() =&gt; this.handleAdd1(7)}&gt; 7 &lt;/button&gt;
            &lt;button onClick={() =&gt; this.handleAdd1(8)}&gt; 8 &lt;/button&gt;
            &lt;button onClick={() =&gt; this.handleAdd1(9)}&gt; 9 &lt;/button&gt;
            &lt;button onClick={() =&gt; this.handleAdd1(0)}&gt; 0 &lt;/button&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
            &lt;h1&gt;{this.state.num2}&lt;/h1&gt;
            &lt;button onClick={() =&gt; this.handleAdd2(1)}&gt; 1 &lt;/button&gt;
            &lt;button onClick={() =&gt; this.handleAdd2(2)}&gt; 2 &lt;/button&gt;
            &lt;button onClick={() =&gt; this.handleAdd2(3)}&gt; 3 &lt;/button&gt;
            &lt;button onClick={() =&gt; this.handleAdd2(4)}&gt; 4 &lt;/button&gt;
            &lt;button onClick={() =&gt; this.handleAdd2(5)}&gt; 5 &lt;/button&gt;
            &lt;button onClick={() =&gt; this.handleAdd2(6)}&gt; 6 &lt;/button&gt;
            &lt;button onClick={() =&gt; this.handleAdd2(7)}&gt; 7 &lt;/button&gt;
            &lt;button onClick={() =&gt; this.handleAdd2(8)}&gt; 8 &lt;/button&gt;
            &lt;button onClick={() =&gt; this.handleAdd2(9)}&gt; 9 &lt;/button&gt;
            &lt;button onClick={() =&gt; this.handleAdd2(0)}&gt; 0 &lt;/button&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
            &lt;button onClick={() =&gt; this.handlePlus("+")}&gt;+&lt;/button&gt;
            &lt;button onClick={() =&gt; this.handlePlus("-")}&gt;-&lt;/button&gt;
            &lt;button onClick={() =&gt; this.handlePlus("x")}&gt;x&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
            &lt;button onClick={this.handleClear}&gt;Clear&lt;/button&gt;
            &lt;h1&gt;{this.state.answer}&lt;/h1&gt;
            &lt;input type="text"&gt;&lt;/input&gt;
            &lt;button onClick={() =&gt; this.handleInput}&gt;Enter !&lt;/button&gt;
            &lt;button onClick={() =&gt; console.log(this.state.equation)}&gt;
              Log in console
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;App /&gt;, document.body);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>If you check out the program, you will see that there are a few numbers, and if you click them and add, you will get the result in an h1. however, this is not that great because you can only add single digits. So, as you can see, I have added an input, which will take the equation and log it in the console(for now). But sadly, this is returning undefined. Is there anything I can do to fix this issue?</p>