React state not updating onclick

Question

im a noob in react.js and am trying to learn state and set state by writing a simple addition ap. im trying to get the 2 values of inputs using state but am not getting anything when i click on the add button for some reason. Can someone please explain how i can add the 2 values and what im doing wrong ? thanks !

import React from 'react'; 
import ReactDOM from 'react-dom';
import { Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
class Grade extends React.Component {
 constructor(props) {
    super(props);
    this.state = {
      result: 0,
      num1: 0,
      num2: 0
    };

       this.handlenum1Change = this.handlenum1Change.bind(this);
    this.handlenum2Change = this.handlenum2Change.bind(this);
  }


  handlenum1Change (evt) {
    this.setState({ num1: evt.target.value });
  }





handlenum2Change(evt) {

    this.setState({ num2: evt.target.value });


}


   addAction (event) {

  var num1=this.setState({ num1: event.target.value });
  var num2=this.setState({ num2: event.target.value });



   this.setState({result: num1 + num2 })

            } 


  render() {


     return (


      <form>
        <label>
          Name:
          <input type="number" onChange={this.handlenum1Change} />
           <input type="number" ref="term" placeholder="Length of loan"  onChange={this.handlenum2Change}/>


            <input type="button" onClick={this.addAction} value="Add"/>
    <input type='text' value={this.state.result} readonly/>

        </label>

      </form>
    );
  }
}




export default Grade;

Answer 1

function Sum(props) {
    return (
       <h1>
        {props.a} + {props.b} = {props.a + props.b}
       </h1>
    );
}

ReactDOM.render(<Sum a={4} b={2}/>,document.getElementById('root'));

Answer 2

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      operator: '+',
      num1: '',
      num2: '',
      result: '0'
    };
    this.actionHandler = this.actionHandler.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this)
  }
  handleChange = (e) => {
    this.setState({ operator: e.target.value })
  }

  handleInputChange(e) {
    this.setState({
      [e.target.name]: Number(e.target.value)
    });
  }

  actionHandler = (e) => {
    e.preventDefault();
    let x = this.state.num1 + this.state.num2;
    this.setState({ result: x })
  }
  render() {
    return (
      <div className="calculate">
        <form>

          <input type="text" onChange={this.handleInputChange} name="num1" placeholder="Enter 1st Number" />
          <br />
          <br />
          <label>
            <select value={this.state.operator} onChange={this.handleChange}>
              <option value="-">-</option>
              <option value="*">*</option>
              <option value="/">/</option>
            </select>
          </label>
          <br />
          <br />
          <input type="text" onChange={this.handleInputChange} name="num2" placeholder="Enter 2nd Number" />
          <br />
          <br />

          <button onClick={this.actionHandler} type="submit" > Answer </button>
          <input type="text" value={this.state.result} readOnly />
        </form>

      </div>
    );
  }
}

Answer 3

You have not bound the function addAction to this. So you've to add that along with this.handlenum1Change = this.handlenum1Change.bind(this);. You can also do that with arrow functions. To compute the values inside addAction you can access the state by doing var num1 = this.state.num1 and not var num2=this.setState({ num2: event.target.value });. Also you should not call setState close togehter. (Read up on it by searching 'why setState is asynchronous') In essence, your addAction should look something like this:

addAction=()=>{
 this.setState({result: this.state.num1 + this.state.num2 })
}

React doesn't do type="number" in input, you can find workarounds here.

So you have to do something like

handlenum1Change (evt) {
 console.log(evt.target.value);
 this.setState({ num1: Number(evt.target.value) });
}

with your handlenum1Change and handlenum2Change.

And readOnly had O capital, yours is readonly. In short at the end of the day your code should look something like

import React from 'react';
import ReactDOM from 'react-dom';

class Grade extends React.Component {
 constructor(props) {
    super(props);
    this.state = {
      result: 0,
      num1: 0,
      num2: 0
    };
    this.handlenum1Change = this.handlenum1Change.bind(this);
    this.handlenum2Change = this.handlenum2Change.bind(this);
  }
  handlenum1Change (evt) {
    console.log(evt.target.value);
    this.setState({ num1: Number(evt.target.value) });
  }
  handlenum2Change(evt) {
    console.log(typeof evt.target.value);
    this.setState({ num2: Number(evt.target.value) });
  }
  addAction =(event)=> {
    let x = this.state.num1 + this.state.num2
    this.setState({result: x })
  }
render() {
 return (
    <form>
        <label>
          Name:
          <input type="number" onChange={this.handlenum1Change} />
          <input type="number"   onChange={this.handlenum2Change}/>
          <input type="button" onClick={this.addAction} value="Add"/>
          <input type='text' value={this.state.result} readOnly/>
        </label>
      </form>
    );
  }
}




export default Grade;

I would strongly recommend you to take a couple of courses in ReactJs.

Answer 4

There are lots of things to be corrected in your code. #1: your add action is wrong. Also you need not have two handle change methods, what if you have 10 fields ? you dont want to write 10 handlechange methods. Please revise the below code and let me know that works.

export default class AddComponent extends Component {
    constructor(props){
        super(props);
        this.state = {
            number1: 0,
            number2: 0,
            total: 0
        }
    }
    handleChange = (e) =>{
        const {name, value} = e.target;
        this.setState({
            [name]: value
        })
    }

    add = () => {
        const{number1, number2} = this.state;
        this.setState({
            total: (parseInt(number1)+parseInt(number2))
        })
    }

    render() {
        const {total} = this.state;
        return (
            <div>
                 <div>{total}</div>
                 <div>
                     <label>Number 1</label>
                     <input type="text" name="number1" onChange={this.handleChange} />
                </div>
                <div>
                     <label>Number 2</label>
                     <input type="text" name="number2" onChange={this.handleChange}/>
                </div>
                <button onClick={this.add}>Add</button>
            </div>
        );
    }
}

Answer 5

this.setState() function return void .

so
var num1=this.setState({ num1: event.target.value });can only get undefined

if you want get num1 use

var num1=this.state.num1

num2

var num2=this.state.num2