title: ReactJS how can I save two numbers from one input field in a state
body: <p>I am new to programming and want to learn React. Currently, the concept of state is very confusing to me. In the code below, I am trying to write this simple app where I ask the user to enter number one, then save that number and then enter number two, save that number as well, and then show the total in the end. I am able to enter only one number in the input field. I don't know what to put in as value in the input field.</p>
  
  <pre><code>import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  
  class Random extends Component {
    state = {
      numberOne: '',
      numberTwo: '',
      message: 'Enter number One',
      showTotal: ''
    };
  
    AddNumbersInTheTextField_one = event =&gt; {
      this.setState({
        numberOne: parseInt(event.target.value)
      });
    };
  
    AddNumbersInTheTextField_two = event =&gt; {
      this.setState({
        numberTwo: parseInt(event.target.value)
      });
    };
  
    HandleSaveButton = () =&gt; {
      this.setState(
        {
          numberOne: this.state.numberOne,
          numberTwo: this.state.numberTwo
        },
        function() {
          this.setState({
            numberOne: '',
            message: 'Enter number two'
          });
        }
      );
    };
  
    HandleShowTotalButton = () =&gt; {
      this.setState({
        showTotal: this.state.numberOne + this.state.numberTwo,
        message: this.state.showTotal
      });
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;{this.state.message}&lt;/h1&gt;
          &lt;div&gt;
            &lt;input
              value={this.state.numberOne}
              onChange={this.AddNumbersInTheTextField_one}
            /&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;button onClick={this.HandleSaveButton}&gt;Save Number&lt;/button&gt;
            &lt;button onClick={this.HandleShowTotalButton}&gt;Show Total&lt;/button&gt;
            &lt;div&gt;{this.state.showTotal}&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;Random /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/react-antd-styled-template-fjcxi?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit Q-58999634-EnterNumber"></a></p>