Estoy tratando de construir la calculadora a partir de los proyectos front-end de Freecodecamp. Y estoy usando la función eval() presionando el botón igual.

Aquí está el componente hijo

 class Equals extends React.Component { constructor(props) { super(props); this.handleEquals = this.handleEquals.bind(this) } handleEquals = () => { this.props.handleClick(eval(this.props.exp)) } render() { return ( <button id='equals' onClick={this.handleEquals}>=</button> ) } }

Y aquí está el componente padre.

 class Calculator extends React.Component { constructor(props) { super(props); this.state = { numPad: numPad, operations: operations, prevVal: [], currVal: '', display: '', expression: [] } this.handleDisplay = this.handleDisplay.bind(this); this.clearDisplay = this.clearDisplay.bind(this); } handleDisplay = input => { this.setState({ currVal: input, prevVal: this.state.prevVal.concat(this.state.currVal), display: this.state.prevVal.concat(this.state.currVal).concat(input), expression: this.state.prevVal.concat(this.state.currVal).concat(input) }) } handleEvaluate = input => { this.setState({ display: input }) } clearDisplay() { this.setState({ prevVal: '', currVal: '', display: '0' }) } render() { return ( <div> <div id='display'>{this.state.display}</div> <Equals exp = {this.state.expression} handleClick = {this.handleEvaluate}/> {this.state.numPad.map(num => <NumPad dig={num.dig} wrd={num.wrd} handleClick={this.handleDisplay}/>)} {this.state.operations.map(op => <Operations sym={op.sym} wrd={op.wrd} handleClick={this.handleDisplay}/>)} <button id='decimal'>.</button> <button id='clear' onClick={this.clearDisplay}>Clear</button> </div> ) } }

Cuando presiono el signo igual obtengo la misma expresión. He intentado pasar 'this.props.exp' y this.props.exp.toString() a la función eval() pero todavía me devuelve la misma cadena sin evaluarla.