Why is input not returning anything in React?

Question

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.

I'm making a small app that will take in numbers and add, subtract, or multiply them, ie a calculator. Here is the code.

 const { Component } = React; class App extends React.Component { state = { num1: 0, num2: 0, answer: 0, equation: "", }; handleAdd1 = (number) => { this.setState({ num1: number }); }; handleAdd2 = (number2) => { this.setState({ num2: number2 }); }; handleClear = () => { this.setState({ num1: 0, num2: 0, answer: 0 }); }; handlePlus = (sign) => { 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) => { this.setState({ equation: event.target.value }); }; render() { return ( <div> <div> <h1>{this.state.num1}</h1> <button onClick={() => this.handleAdd1(1)}> 1 </button> <button onClick={() => this.handleAdd1(2)}> 2 </button> <button onClick={() => this.handleAdd1(3)}> 3 </button> <button onClick={() => this.handleAdd1(4)}> 4 </button> <button onClick={() => this.handleAdd1(5)}> 5 </button> <button onClick={() => this.handleAdd1(6)}> 6 </button> <button onClick={() => this.handleAdd1(7)}> 7 </button> <button onClick={() => this.handleAdd1(8)}> 8 </button> <button onClick={() => this.handleAdd1(9)}> 9 </button> <button onClick={() => this.handleAdd1(0)}> 0 </button> </div> <div> <h1>{this.state.num2}</h1> <button onClick={() => this.handleAdd2(1)}> 1 </button> <button onClick={() => this.handleAdd2(2)}> 2 </button> <button onClick={() => this.handleAdd2(3)}> 3 </button> <button onClick={() => this.handleAdd2(4)}> 4 </button> <button onClick={() => this.handleAdd2(5)}> 5 </button> <button onClick={() => this.handleAdd2(6)}> 6 </button> <button onClick={() => this.handleAdd2(7)}> 7 </button> <button onClick={() => this.handleAdd2(8)}> 8 </button> <button onClick={() => this.handleAdd2(9)}> 9 </button> <button onClick={() => this.handleAdd2(0)}> 0 </button> </div> <div> <button onClick={() => this.handlePlus("+")}>+</button> <button onClick={() => this.handlePlus("-")}>-</button> <button onClick={() => this.handlePlus("x")}>x</button> </div> <div> <button onClick={this.handleClear}>Clear</button> <h1>{this.state.answer}</h1> <input type="text"></input> <button onClick={() => this.handleInput}>Enter !</button> <button onClick={() => console.log(this.state.equation)}> Log in console </button> </div> </div> ); } } ReactDOM.render(<App />, document.body);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

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?

Answer 1

You need to make the input a controlled component. You can make input controlled component by listening to the onChange event and passing value to the value attribute

<input type="text" value={this.state.equation} onChange={(e)=>this.setState({equation: e.target.value})}

Now you will be get the equation

Answer 2

you forgot to map the value of input tag, you can bind that with state, if you are new to react you should start using hooks thats more clear approach now,
here is full working solution,
https://codesandbox.io/embed/inspiring-tesla-9sjop?fontsize=14&hidenavigation=1&theme=dark

import React, { Component } from "react";

class App extends React.Component {
  state = {
    num1: 0,
    num2: 0,
    answer: 0,
    equation: "",
    value: ""
  };

  handleChange = (e) => {
    this.setState({ equation: e.target.value });
  };

  handleAdd1 = (number) => {
    this.setState({ num1: number });
  };

  handleAdd2 = (number2) => {
    this.setState({ num2: number2 });
  };

  handleClear = () => {
    this.setState({ num1: 0, num2: 0, answer: 0 });
  };

  handlePlus = (sign) => {
    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) => {
    this.setState({ equation: event.target.value });
  };

  render() {
    return (
      <div>
        <div>
          <h1>{this.state.num1}</h1>
          <button onClick={() => this.handleAdd1(1)}> 1 </button>
          <button onClick={() => this.handleAdd1(2)}> 2 </button>
          <button onClick={() => this.handleAdd1(3)}> 3 </button>
          <button onClick={() => this.handleAdd1(4)}> 4 </button>
          <button onClick={() => this.handleAdd1(5)}> 5 </button>
          <button onClick={() => this.handleAdd1(6)}> 6 </button>
          <button onClick={() => this.handleAdd1(7)}> 7 </button>
          <button onClick={() => this.handleAdd1(8)}> 8 </button>
          <button onClick={() => this.handleAdd1(9)}> 9 </button>
          <button onClick={() => this.handleAdd1(0)}> 0 </button>
        </div>

        <div>
          <h1>{this.state.num2}</h1>
          <button onClick={() => this.handleAdd2(1)}> 1 </button>
          <button onClick={() => this.handleAdd2(2)}> 2 </button>
          <button onClick={() => this.handleAdd2(3)}> 3 </button>
          <button onClick={() => this.handleAdd2(4)}> 4 </button>
          <button onClick={() => this.handleAdd2(5)}> 5 </button>
          <button onClick={() => this.handleAdd2(6)}> 6 </button>
          <button onClick={() => this.handleAdd2(7)}> 7 </button>
          <button onClick={() => this.handleAdd2(8)}> 8 </button>
          <button onClick={() => this.handleAdd2(9)}> 9 </button>
          <button onClick={() => this.handleAdd2(0)}> 0 </button>
        </div>

        <div>
          <button onClick={() => this.handlePlus("+")}>+</button>
          <button onClick={() => this.handlePlus("-")}>-</button>
          <button onClick={() => this.handlePlus("x")}>x</button>
        </div>

        <div>
          <button onClick={this.handleClear}>Clear</button>
          <h1>{this.state.answer}</h1>
          <input
            type="text"
            value={this.state.equation}
            onChange={this.handleChange}
          ></input>
          <button onClick={() => this.handleInput}>Enter !</button>
          <button onClick={() => console.log(this.state.equation)}>
            Log in console
          </button>
        </div>
      </div>
    );
  }
}

export default App;