I have a question regarding React.js
Sometimes I have to press a button second time so that it will change the state as what I coded.
For example, I am not sure why I have to press my equals button second time to change the state as what I expected it to be.
Can anyone explain why this happen? Thank you in advance
Below is the link to my codepen.
(I don’t know why it looks like it’s not working, but it works fine after you click inside.)
or the code is here
const {useState} = React;
function App() {
const [currentValue, setCurrentValue] = useState("0");
const [preValue, setPreValue] = useState("");
const [readyToCalculate, setReadyToCalculate] = useState("false");
const [storeTheOperator, setStoreTheOperator] = useState("");
const [pressEqualsButton, setPressEqualsButton] = useState("false");
function handleClick(button) {
const { value } = button.target;
appendNum(value);
}
function appendNum(num) {
if (num === "." && currentValue.includes(".")) return;
if (!isNaN(num) || num === ".") {
if (currentValue === "0" || currentValue === 0) {
setCurrentValue(num);
} else {
setCurrentValue(currentValue + num);
}
}
}
function chooseTheOperator(operator) {
const { value } = operator.target;
setStoreTheOperator(value);
if (preValue === "") {
setPreValue(currentValue);
setCurrentValue("");
}
if (preValue !== "" && currentValue !== "" && storeTheOperator !== "") {
computation();
}
}
function equals() {
if (preValue === "" || currentValue === "") return;
setPressEqualsButton("true");
if (pressEqualsButton === "true") {
computation();
} else {
return;
}
} // has problem,can't change the state
function computation() {
let num;
switch (storeTheOperator) {
case "+":
num = parseFloat(preValue) + parseFloat(currentValue);
break;
case "-":
num = parseFloat(preValue) - parseFloat(currentValue);
break;
case "x":
num = parseFloat(preValue) * parseFloat(currentValue);
break;
case "/":
num = parseFloat(preValue) / parseFloat(currentValue);
break;
default:
console.log("something went wrong");
}
console.log(pressEqualsButton);
if (pressEqualsButton === "true") {
console.log("This is true in computation");
setCurrentValue(num);
setPreValue("");
setStoreTheOperator("");
setPressEqualsButton("false");
} else {
console.log("This is false in computation");
setPreValue(num);
setCurrentValue("");
}
}
function deletTheNumber() {
setCurrentValue(currentValue.slice(0, -1));
}
function allClear() {
setCurrentValue("0");
setPreValue("");
setStoreTheOperator("");
setPressEqualsButton("false");
}
return (
<div className="calculator-grid">
<div className="display">
<div className="previous-value">
{preValue} {storeTheOperator}
</div>
<div className="current-value"> {currentValue}</div>
</div>
<button value="ac" onClick={allClear} className="span-two">
AC
</button>
<button value="del" onClick={deletTheNumber}>
Del
</button>
<button value="/" onClick={chooseTheOperator}>
/
</button>
<button value="1" onClick={handleClick}>
1
</button>
<button value="2" onClick={handleClick}>
2
</button>
<button value="3" onClick={handleClick}>
3
</button>
<button value="x" onClick={chooseTheOperator}>
x
</button>
<button value="4" onClick={handleClick}>
4
</button>
<button value="5" onClick={handleClick}>
5
</button>
<button value="6" onClick={handleClick}>
6
</button>
<button value="+" onClick={chooseTheOperator}>
+
</button>
<button value="7" onClick={handleClick}>
7
</button>
<button value="8" onClick={handleClick}>
8
</button>
<button value="9" onClick={handleClick}>
9
</button>
<button value="-" onClick={chooseTheOperator}>
-
</button>
<button value="." onClick={handleClick}>
.
</button>
<button value="0" onClick={handleClick}>
0
</button>
<button value="=" onClick={equals} className="span-two">
=
</button>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));