React state clearing onChange [duplicate] - node.js

Question

This question already has answers here:
Why does calling react setState method not mutate the state immediately?
(9 answers)
Closed 9 months ago.
i am trying to build a calculation platform and i got an issue in that process when i am trying to clearing the state of my input value its last value store in it and because of that i am not able to perform certain task here the code
import React, { useState } from "react";
const App = () => {
const [buyPrice, setBuyPrice] = useState(8000);
const [buyAMount, setBuyAMount] = useState(0);
const [buy_total, setBuy_total] = useState(0);
const handleBuyChange = (e) => {
var { name, value } = e.target;
if (name == 'buyPrice') {
setBuyPrice(value);
}
if (name == 'buyAMount') {
setBuyAMount(value);
}
if (name == 'buy_total') {
setBuy_total(value);
}
console.log('alert',buyPrice,buyAMount,buy_total)
};
return (
<div>
<div>
<input
type={"number"}
name="buyPrice"
value={buyPrice}
onChange={(e) => handleBuyChange(e)}
/>
<input
type={"number"}
name="buyAMount"
value={buyAMount}
onChange={handleBuyChange}
/>
<input
type={"number"}
name="buy_total"
value={buy_total}
onChange={handleBuyChange}
/>
</div>
</div>
);
};
Heres the console:--
img

Answer 1

React setState functions are asynchronous in nature so the console.log showing previous values might be due to the fact that the state hasn't been updated yet so if you perform console.log outside the function you will get the updated values
import React, { useState } from "react";
const App = () => {
const [buyPrice, setBuyPrice] = useState(8000);
const [buyAMount, setBuyAMount] = useState(0);
const [buy_total, setBuy_total] = useState(0);
const handleBuyChange = (e) => {
var { name, value } = e.target;
if (name == 'buyPrice') {
setBuyPrice(value);
}
if (name == 'buyAMount') {
setBuyAMount(value);
}
if (name == 'buy_total') {
setBuy_total(value);
}
};
console.log('alert',buyPrice,buyAMount,buy_total)
return (
<div>
<div>
<input
type={"number"}
name="buyPrice"
value={buyPrice}
onChange={(e) => handleBuyChange(e)}
/>
<input
type={"number"}
name="buyAMount"
value={buyAMount}
onChange={handleBuyChange}
/>
<input
type={"number"}
name="buy_total"
value={buy_total}
onChange={handleBuyChange}
/>
</div>
</div>
);
};

Answer 2

total become read-only mode.
Check this code
const { useState } = React;
const App = () => {
const [buyPrice, setBuyPrice] = useState(8000);
const [buyAMount, setBuyAMount] = useState(0);
const [buy_total, setBuy_total] = useState(0);
const handleBuyChange = (e) => {
var { name, value } = e.target;
if (name == 'buyPrice') {
setBuyPrice(value);
}
if (name == 'buyAMount') {
setBuyAMount(value);
}
setBuy_total(buyPrice * buyAMount);
console.log('alert',buyPrice,buyAMount,buyPrice * buyAMount)
};
return (
<div>
<div>
<input
type="number"
name="buyPrice"
value={buyPrice}
onChange={(e) => handleBuyChange(e)}
/>
<input
type="number"
name="buyAMount"
value={buyAMount}
onChange={(e) =>handleBuyChange(e)}
/>
<input
type="number"
name="buy_total"
value={buyPrice * buyAMount}
readOnly
/>
</div>
</div>
);
};
ReactDOM.render(
<App />,
document.getElementById('root')
);
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<div id="root"></div>