React calculator

I can not pass the last test 5 * - + 5. If anyone can explain where it is not. thanks for any help.

class Buttons extends React.Component{

render(){
return(
<React.Fragment>


AC
      <button onClick={this.props.handleOperators} 
         className="btn btn-warning" 
        id="divide" value={`/`} >/</button>
      <button className="btn btn-warning"
        onClick={this.props.handleOperators} 
        id="multiply" value={`*`}>x</button>
    </div>
     <div id="buttons-row">
      <button onClick={this.props.handleValue}
        className="btn btn-primary"
        id="one" value={`1`}>1</button>
      <button onClick={this.props.handleValue}
        className="btn btn-primary"
        id="two" value={`2`}>2</button>
      <button onClick={this.props.handleValue}
        className="btn btn-primary"
        id="three" value={`3`}>3</button>
      <button onClick={this.props.handleOperators} 
        className="btn btn-warning"
        id="subtract" value={`-`}>-</button>
    </div>
     <div id="buttons-row">
      <button onClick={this.props.handleValue}
        className="btn btn-primary"
        id="four" value={`4`}>4</button>
      <button onClick={this.props.handleValue} 
        className="btn btn-primary"
        id="five" value={`5`}>5</button>
      <button onClick={this.props.handleValue}
        className="btn btn-primary"
        id="six" value={`6`}>6</button>
      <button onClick={this.props.handleOperators} 
           className="btn btn-warning" 
        id="add" value={`+`}>+</button>
    </div>
     <div id="buttons-row">
      <button onClick={this.props.handleValue} 
        className="btn btn-primary"
        id="seven" value={`7`}>7</button>
      <button onClick={this.props.handleValue} 
        className="btn btn-primary"
        id="eight" value={`8`}>8</button>
      <button onClick={this.props.handleValue} 
        className="btn btn-primary"
        id="nine" value={`9`}>9</button>
       
       <button onClick={this.props.handleEqual} 
        className="btn btn-warning"
        id="equals" value={`=`}>=</button>
    </div>
     <div id="buttons-row">
      <button onClick={this.props.handleValue} 
        className="btn btn-primary"
        id="zero" value={`0`}>0</button>
      <button onClick={this.props.handleDecimal} 
        className="btn btn-primary"
        id="decimal" value={"."}>.</button>
      
    </div>
   </React.Fragment>
)

}

}

class Calculator extends React.Component{
constructor(props){
super(props);
this.state= {
display: β€˜0’,
prevValue: β€˜β€™
}

this.handleClear = this.handleClear.bind(this);
this.handleValue = this.handleValue.bind(this);
this.handleOperators = this.handleOperators.bind(this);
this.handleDecimal = this.handleDecimal.bind(this);

}

handleValue(e){
if(this.state.display == β€˜0’){
this.setState({
display: e.target.value,
})
}else{
this.setState({
display: this.state.display + e.target.value,
})
}
}
handleOperators(e){

 this.setState({
   prevValue: e.target.value,
   display:  this.state.prevValue != e.target.value ? this.state.display + e.target.value :
   this.state.display
 })

}
handleDecimal(e){
this.setState({
prevValue: e.target.value,
display: e.target.value != this.state.prevValue ?
this.state.display + e.target.value: this.state.display
})
}
handleClear(){
this.setState({
display: β€˜0’,
prevValue: β€˜β€™
})
}

handleEqual = () => {
let rightEqual = this.state.display;
const result = eval(rightEqual);
console.log(rightEqual)
this.setState({
display: result,
prevValue: result
}) // eval math function equal our expression
}

render(){
return(



{this.state.prevValue}

{this.state.display}



);

}
}

ReactDOM.render(, document.getElementById(β€œroot”));

Link to the challenge:

Tests expect only the last operator to be executed (i.e. 5 + 5), so if the input has multiple operators you should remove all of them except for the last.
One option would be:

  handleEqual = () => {
    let rightEqual = this.state.display;
    rightEqual = rightEqual.replace(/[+*/-]+/g, ops => ops.substring(ops.length - 1)); // add this line
    const result = eval(rightEqual);
    console.log(rightEqual);
    this.setState({
      display: result,
      prevValue: result
    }); // eval math function equal our expression
  };

Also you don’t need to post the whole code in the post if you have link to a codepen.

1 Like