React state clearing onChange

Question

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

You are logging stale value due to closures. Get rid of the closure or log the values in useEffect — Dennis Vash, Jun 08 '22 at 12:23
React state updates are async - in order to see immediate changes, you need to take advantage of the `useEffect()` [hook](https://reactjs.org/docs/hooks-effect.html). Pay close to attention to the part about the dependency array, this will allow you to do what you need. — Jlove, Jun 08 '22 at 12:24
State updates are asynchronous in nature. To verify the state value after a state update you can use the 2nd callback argument of setState (https://reactjs.org/docs/react-component.html#setstate). Eg: setBuyPrice(price, ()=>{console.log(buyPrice);}); — Nice Books, Jun 08 '22 at 14:15

score 0 · Accepted Answer · answered Jun 08 '22 at 12:20

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>
);
};

You are right but whenever i try to clear values using backspace the first value stay in input value like its not affecting or clearing can you please help me on that cause i have to clear the values and change state at right time — TechnoDeveloper, Jun 08 '22 at 13:04
This answer work for me i see that i am trying to get data in that function where value is setting after the click — TechnoDeveloper, Jun 09 '22 at 10:11

score 0 · Answer 2 · answered Jun 08 '22 at 12:24

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>

React state clearing onChange

2 Answers2