Add two number without action button react.js

Question

import React, { Component } from 'react';

class App extends React.Component{
    constructor(){
        super();
        this.state ={
            num1 : 0,
            num2 : 0,
            result :0,
    }
    this.updateNum1=this.updateNum1.bind(this);
    this.updateNum2=this.updateNum2.bind(this);
    this.updateResult=this.updateResult.bind(this);
    };

    updateNum1(data){
        this.setState({
            num1 : data.target.value
        });
    }

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

    updateResult(){
    this.setState({
        result : parseInt(this.state.num1)+parseInt(this.state.num2)
    });
    }


    render(){
        return(
            <div>
                <input type ="number"  value={this.state.num1} 
                onChange = {this.updateNum1} />
                <input type ="number"  value={this.state.num2} 
                onChange = {this.updateNum2} />


                {/* <button onClick ={this.updateResult} >Add</button> 
     */}


                <h1>{this.state.result}</h1>
            </div>
        );
    }   
}
export default App;

//Add both the numbers without action button// I want to add both the numbers without the use of button 1

I am trying to add two number by taking default value in input field.How can I add this two number without Add button. Like for example if user change the num1 value to 4 from 0 it should update the value adding number 4 value ( num1= 4 + num2 =0 = result 4). It should auto update the third input field value or text with result value in it.

Alserda · Accepted Answer · 2019-01-09 12:57:11Z

3

You don't have to store your result in your state, as you can calculate it by your current state:

class App extends React.Component {
  constructor() {
    super();

    this.state ={
      num1 : 0,
      num2 : 0,
    }
  }

  updateNum1(event) {
    this.setState({
      num1: event.target.value
    });
  }

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

  render() {
    const { num1, num2 } = this.state;

    const total = parseInt(num1) + parseInt(num2);

    return (
      <div>
        <input
          type='number'
          value={num1}
          onChange={this.updateNum1.bind(this)}
        />
        <input
          type='number'
          value={num2}
          onChange={this.updateNum2.bind(this)}
        />

        <h1>{total}</h1>
      </div>
    );
  );
}

answered Jan 9, 2019 at 12:57

Alserda

4,8041 gold badge19 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Danyal Imran · Accepted Answer · 2019-01-09 12:52:28Z

0

You can simply set the result state when you are updating your num1 or num2 state.

updateNum1(data){
  this.setState({
    num1 : data.target.value,
    result: data.target.value + this.state.num2
  });
}

You are going to do the same with your updateNum2 method as well.

or instead of having a result state you can just add them both in your jsx dynamically.

<h1>Result: {this.state.num1 + this.state.num2}</h1>

instead of

<h1>{this.state.result}</h1>

answered Jan 9, 2019 at 12:52

Danyal Imran

2,60515 silver badges21 bronze badges

2 Comments

Danyal Imran Over a year ago

@Tarreq Pardon me, I don't quiet understand what you mean right there.

Tarreq Over a year ago

Excuse me bro, i was confused, i thought you using this.state, inside state object itself, my fault :)

Tarreq · Accepted Answer · 2019-01-09 12:54:12Z

0

You can just use:

<h1>{this.state.num1 + this.state.num2 }</h1>

answered Jan 9, 2019 at 12:54

Tarreq

1,3551 gold badge10 silver badges18 bronze badges

Comments

sedders123 · Accepted Answer · 2019-01-09 13:03:34Z

0

If you want to keep your existing component structure you could add a call to updateResult as a callback when setting state in updateNum1 and updateNum2.

e.g.

updateNum1(data){
    this.setState({
        num1 : data.target.value
    }, this.updateResult);
}

updateNum2(data){
    this.setState({
        num2 : data.target.value
    }, this.updateResult);
}

This will call the updateResult after the state has been updated

answered Jan 9, 2019 at 13:03

sedders123

8211 gold badge12 silver badges21 bronze badges

Collectives™ on Stack Overflow

Add two number without action button react.js

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related