Getting wrong output in calculator in react js

Question

I'm working on a calculator in react js. When I add two numbers it gives me the right answer but after I click on the minus button it adds first Value to the result and gives me the addition result. I'm trying to figure out where the problem is but I can't. Here is the code of my operation function

import React, { Component } from 'react';



export default class Calculator extends Component {
constructor(props)
{
    super(props)
    {
            this.state={
                value:'0',
                firstValue:0,
                operation:'',
                previousvalue:'',
                nextvalue:'',
                showingTemporaryResult:false
            }
    };
    this.handleclick=this.handleclick.bind(this);
    this.operation=this.operation.bind(this);
    this.cleardisplay=this.cleardisplay.bind(this);
    this.dot=this.dot.bind(this);
    this.changesign=this.changesign.bind(this);
    this.percent=this.percent.bind(this);


}
handleclick(digit)
{    
    if(this.state.showingTemporaryResult) {
        console.log("TRUE CALLED");
        this.setState({value:String(digit),showingTemporaryResult:false})
    }
    else {
        console.log("ELSE CALLED");
        this.setState({value:this.state.value==='0'?String(digit):this.state.value + digit});
    }


   // console.log('helo click fire',this.state.value);

}
cleardisplay()
{
     this.setState({value:'0',
     firstValue:0,
     operation:'',
     previousvalue:'',
     nextvalue:'',
     showingTemporaryResult:false});
}
dot()
{
    if(this.state.value.indexOf('.')===-1)
    {
        this.setState({value:this.state.value+'.'})
    }
}
changesign()

{
    console.log("Event Change Sign")
    if(this.state.value.charAt(0)==='-')
    {
        this.setState({value:this.state.value.substr(1)})
       // console.log(' sign not change');

    }
    else{
        this.setState({value:'-'+this.state.value})
        console.log('lets change sign');
    }

}
operation(operator)
{


    if(operator==='+'||operator==='-'||operator==='*'||operator==='/')
    {
        console.log('operator coming',operator);
       this.setState({operation:operator});
       console.log('operator coming',this.state.operation);
        if(this.state.operator === '+') {
            let secondValue = parseInt(this.state.value);
            let firstValue = parseInt(this.state.firstValue);
            console.log('chcking first value in plus ',firstValue);
            let sum = secondValue+firstValue;
            this.setState({firstValue:sum,value:sum,showingTemporaryResult:true,operation:operator});
            //console.log('somthing here ');
        }
        else if(this.state.operator==='-')
        {
            let secondValue = parseInt(this.state.value);
            let firstValue = parseInt(this.state.firstValue);
            console.log('chcking first value in minus ',firstValue);
            let sum = secondValue-firstValue;
            this.setState({firstValue:sum,value:sum,showingTemporaryResult:true});
        }

        else if (this.state.operation === '') {
            let firstValue = parseInt(this.state.value);
            this.setState({firstValue});
            this.setState({value:'',operation:operator});
            console.log('or here ');
        }

    }
    else if(operator==='=')
    {
        if(this.state.operation === '+') {
            let answer = parseInt(this.state.value) + parseInt(this.state.firstValue);
            this.setState({value:answer});

        }
        else if(this.state.operation==='-'){
            let answer = parseInt(this.state.value) - parseInt(this.state.firstValue);
            this.setState({value:answer});
        }

    }



}
percent()
{
    this.setState({value:this.state.value/100})
}

render() {
return (
  <div className="cal">

      <input type="num" name="res" value={this.state.value} disabled style={{height:'8vh',width:'47vh',backgroundColor:'black',color:'white',fontSize:'20px'}}/><br></br>
      <input type="button" name="ac" onClick={() => this.cleardisplay()} value="Ac" style={{height:'5vh',width:'12vh',backgroundColor:'#ccced1',border:'1px solid black'}}/>
      <input type="button" name="+/-" onClick={() => this.changesign()} value="+/-" style={{height:'5vh',width:'12vh',backgroundColor:'#ccced1',border:'1px solid black'}}/>
      <input type="button" name="%" onClick={() => this.percent()}value="%" style={{height:'5vh',width:'12vh',backgroundColor:'#ccced1',border:'1px solid black'}}/>
      <input type="button" name="/" onClick={() => this.operation('/')} value='/' style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>

      <br></br>
      <input type="button" name="7" onClick={() => this.handleclick(7)} value="7" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="8" onClick={() => this.handleclick(8)} value="8" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="9" onClick={() => this.handleclick(9)} value="9" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="*" onClick={() => this.operation('*')} value='*' style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>

      <br></br>
      <input type="button" name="4"  onClick={() => this.handleclick(4)} value="4" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="5" onClick={() => this.handleclick(5)} value="5" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="6" onClick={() => this.handleclick(6)}value="6" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="-" onClick={() => this.operation('-')} value='-' style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>

      <br></br>
      <input type="button" name="1" onClick={() => this.handleclick(1)} value="1" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="2" onClick={() => this.handleclick(2)} value="2" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="3" onClick={() => this.handleclick(3)} value="3" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="+" onClick={() => this.operation('+')} value='+' style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>

       <br></br>
      <input type="button" name="0" onClick={() => this.handleclick(0)} value="0" style={{height:'5vh',width:'24vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="." onClick={() => this.dot()} value="." style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="=" onClick={() => this.operation('=')} value="=" style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>



  </div>
    )
    }
     }

now i add my whole component in post .........................................................................................................................................................................................................................................

Matan Bobi · Accepted Answer · 2018-04-20 16:37:14Z

1

You are setting the state and then checking for it's value. You need to understand that setState is an asynchronous action and you cannot count on it's value being changed right after you call it.

Based on the react docs:

Calls to setState are asynchronous - don’t rely on this.state to reflect the new value immediately after calling setState. Pass an updater function instead of an object if you need compute values based on the current state (see below for details).

In your code you are changing the state: this.setState({operation:operator}); and then checking for it's new value if(this.state.operation === '+').
You should be checking the operator or make the actions after the state changes with componentDidUpdate or the callaback of setState
this.setState({operation: operator}, () => {if(this.state.operation === '+')})

Edit:
After your edit I see two problems:

Your architecture isn't good, you saw that sometimes you receive an empty operator after setting it and had some patchy if statement, you can remove it once moving your code to the callback.
When your setting your state, you should clear your value as it isnt relevant anymore. in this line:
this.setState({firstValue:sum,value:sum,showingTemporaryResult:true,operation:operator});

edited Apr 20, 2018 at 16:37

answered Apr 19, 2018 at 9:05

Matan Bobi

2,8111 gold badge18 silver badges28 bronze badges

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

11 Comments

ahmad bilal Over a year ago

i did this change operator at the place of operation but what should i make chanings in the condtion else if (this.state.operation === '') { let firstValue = parseInt(this.state.value); this.setState({firstValue}); this.setState({value:'',operation:operator}); console.log('or here '); }

Matan Bobi Over a year ago

Couldn't understand your question now but the problem is that you are using the wrong operator because your still hasnt changed yet to the new operator.

ahmad bilal Over a year ago

can i mail you my code ??would you like to share ur email ?

Matan Bobi Over a year ago

No need. Just edit your post with the code and i'll respond again

Matan Bobi Over a year ago

@bilalahmad123456 Can you explain your problem? did you try to move the code to the callback of setState?

|

pilczuk · Accepted Answer · 2018-04-19 09:04:58Z

0

I tihnk you are ancounter some bugs because setState is not synchronous. If you want to execute something after state is set to new value you need to pass callback as a second parameter. Please take a look at this snippet of code:

constructor() {
  this.state = {
    foo1: 'bar',
    foo2: 'bar'
  }
}

someMethod() {
  this.setState({foo1: 'baz});
  console.log(this.state.foo1); // outputs "bar"
}

someDifferentMethod() {
  this.setState({foo2: 'baz}, () => {console.log(this.state.foo2)});
  // outputs "baz"
}

answered Apr 19, 2018 at 9:04

pilczuk

1961 silver badge8 bronze badges

Collectives™ on Stack Overflow

Getting wrong output in calculator in react js

2 Answers 2

11 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related