Hello,
I am currently working on a calculator and am having issues with my Calculator always being behind by one action.
The code has been stripped down to only basic number inputs so I can demonstrate the issue. The React code is kind of a mess, because I used Codpen’s auto formatting.
Shortened React code here:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
equationHistory: [], // Not used for now
currentEquationData: [],
currentEquationString: "0 + 1 + 1 + 2 + 3 + 5 = 12"
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
let current = event.target.id;
let numbersCheck = Object.keys(numbers).indexOf(current) !== -1;
console.log(current);
if (numbersCheck) {
this.setState({
currentEquationData: [...this.state.currentEquationData, numbers[current]]
});
}
this.setState({
currentEquationString: [...this.state.currentEquationData].join("")
});
console.log(this.state)
}
render() {
return (
<div id="calculator">
<div id="calculator-display-wrapper">
<h1>
Ti-<b>1000X</b>a
</h1>
<p id="display">{this.state.currentEquationString}</p>
</div>
// here would be the buttons with event handlers for click
</div>
)
}
The react code works by storing the current equation as a array, while also rendering a string format for the display.
When the number button is pushed, the code activates, but the state is not updated before the component renders. If you push another number button, it puts the first number you pushed into the state.
console.log(this.state)
shows the state wasn’t even updated directly after setting the state itself with the new value.