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(
);
}
}
ReactDOM.render(, document.getElementById(βrootβ));
Link to the challenge: