I am working on my calculator, and I am stumped trying to make my operators work properly. Here is what I have so far:
class Buttons extends React.Component {
render() {
return(
<div>
<button id="clear" value="C">C</button>
<button id="clear-entry" value="CE">CE</button>
<button id="delete" value="DEL">⌫</button>
<button id="divide" value="/" onClick={this.props.onOperators}>÷</button>
<button id="seven" value="7" onClick={this.props.onNumbers}>7</button>
<button id="eight" value="8" onClick={this.props.onNumbers}>8</button>
<button id="nine" value="9" onClick={this.props.onNumbers}>9</button>
<button id="multiply" value="*" onClick={this.props.onOperators}>×</button>
<button id="four" value="4" onClick={this.props.onNumbers}>4</button>
<button id="five" value="5" onClick={this.props.onNumbers}>5</button>
<button id="six" value="6" onClick={this.props.onNumbers}>6</button>
<button id="subtract" value="-" onClick={this.props.onOperators}>-</button>
<button id="one" value="1" onClick={this.props.onNumbers}>1</button>
<button id="two" value="2" onClick={this.props.onNumbers}>2</button>
<button id="three" value="3" onClick={this.props.onNumbers}>3</button>
<button id="add" value="+" onClick={this.props.onOperators}>+</button>
<button id="zero" value="0" onClick={this.props.onNumbers}>0</button>
<button id="decimal" value=".">.</button>
<button id="=" value="=">=</button>
</div>
)
}
}
class Calculator extends React.Component {
constructor(props) {
super(props);
this.state = {
prevValue: 0,
currValue: 0,
operator: null,
input: '0',
formula: '',
};
this.handleNumbers = this.handleNumbers.bind(this);
this.handleOperators = this.handleOperators.bind(this);
}
handleNumbers(event) {
if (this.state.evaluated) {
this.setState({
input: event.target.value,
evaluated: false,
})
} else {
this.setState({
input: this.state.input.concat(event.target.value),
});
}
}
handleOperators(event) {
const op = {
'/': (a, b) => {return a / b},
'*': (a, b) => {return a * b},
'-': (a, b) => {return a - b},
'+': (a, b) => {return a + b},
};
let answer = parseFloat(this.state.input);
if (this.state.operator === null) {
this.setState({
currValue: answer,
operator: event.target.value,
formula: this.state.input.concat(' ' + event.target.value)
});
} else {
this.setState({
prevValue: this.state.currValue,
formula: this.state.formula
.concat(' ' + this.state.input)
.concat(' ' + event.target.value)
});
this.setState({
currValue: op[this.state.operator](this.state.prevValue, answer)
});
this.setState({
input: this.state.currValue,
operator: event.target.value,
});
}
this.setState({
evaluated: 'true'
})
}
render() {
return(
<div id="calculator">
<div id="display">
<p id="output">{this.state.formula}</p>
<p id="input">{this.state.input}</p>
</div>
<Buttons
onNumbers={this.handleNumbers}
onOperators={this.handleOperators}
/>
</div>
)
}
}
ReactDOM.render(
<Calculator />,
document.getElementById('root'));
I am trying to make it so that when an operator button is pressed, it shows the equation thus far, and the solution, as it would do on a normal digital calculator. I am having trouble getting it to show the solution.
What I really don’t understand is why when this.setState({ currValue: op[this.state.operator](this.state.prevValue, answer) }); is called in the handleOperators method, it doesn’t store the intended value.
I have tried running the code with this.setState({currValue: op[this.state.operator](3, 6)});and it works correctly, which leads me to believe that either or both this.state.prevValue and answer are not working as numbers, but I don’t understand why that is the case.
Any help in solving this would be greatly appreciated. Also I would be open to any pointers in formatting the code in general in order to make it look/run better.
Thanks!