why input value (type number) does not change with onChange attribute in React?

Question

I want that my input value which has type number changes on every keystroke in react but it does not work. I have two inputs one with type text and one with type number. with every keystroke I call a function and setState with the value of input and I use the two-way binding to give back the input value the updated state. with input type text everything works fine but not with input type number the input value changes after input lo. here is my code

const IngredientForm = (props) => {
  const [name, setName] = useState("");
  const [amount, setAmount] = useState("");

 const nameChangeHandler = (event) => {
   setName(event.target.value);
 };
const amountChangeHandler = (event) => {
  setAmount(event.target.value);
};

const submitHandler = (event) => {
  event.preventDefault();
  // ...
};

return (
  <section className="ingredient-form">
   <Card>
    <form onSubmit={submitHandler}>
      <div className="form-control">
        <label htmlFor="title">Name</label>
        <input
          type="text"
          id="title"
          onChange={nameChangeHandler}
          value={name}
        />
      </div>
      <div className="form-control">
        <label htmlFor="amount">Amount</label>
        <input
          type="number"
          id="amount"
          onChange={amountChangeHandler}
          value={amount}
        />
      </div>
      <div className="ingredient-form__actions">
        <button type="submit">Add Ingredient</button>
      </div>
    </form>
  </Card>
</section>
  );
 };

export default IngredientForm;

Update: Actually I can not see the value change when I try to use browser Inspect and see value change in element tab otherwise If I log something with every keystroke It just work fine

I was able to make it work. Can you please check this codesandbox.io/s/eager-poitras-y4cjem?file=/src/abc.js? — Sultan
– Sultan, Commented Nov 27, 2022 at 8:02
@Sultan thanks for your comment. but it is not working. it changes the input value for number ( the second input) only after it lost focus not with every keystroke like first input which has type text. I test it in chrome and fireFox too — ali safaeyan
– ali safaeyan, Commented Nov 27, 2022 at 8:18
Please check the console here. The value is being updated in the dom. Hence, JS call to fetch the value is working correctly. However, the browser seems to not update the value in the elements panel until it is being being out of focus. Could be a browser issue. codesandbox.io/s/eager-poitras-y4cjem?file=/src/abc.js — Sultan
– Sultan, Commented Nov 28, 2022 at 2:29
@Sultan thanks. as you said the value is being update in the dom but not in elements panel.there is no problem anymore I just wonder why this is happening just for inputs with type number and not with inputs with type text. I could be a browser issue as you said. — ali safaeyan
– ali safaeyan, Commented Nov 29, 2022 at 8:36
Just for you to know, in react there is no such thing as two-way data binding. Its only one way flow, you just loop it the way it seems to be a two-way (which is exist in angular) — Oleg Brazhnichenko
– Oleg Brazhnichenko, Commented Nov 30, 2022 at 15:49

Sam Levine · Accepted Answer · 2022-11-27 08:45:39Z

It sounds like you are trying to console.log the updated state inside of the function.

"setState is asynchronous call means if synchronous call get called it may not get updated at right time like to know current value of object after update using setState it may not get give current updated value on console. To get some behavior of synchronous need to pass function instead of object to setState." - https://www.geeksforgeeks.org/reactjs-setstate/

For more clean and concise code you should set the state inside of your input:

<input
type="text"
id="title"
onChange={(e)=> setName(e.target.value)}
value={name}
/>

<input
type="number"
id="amount"
onChange={(e)=> setAmount(e.target.value)}
value={amount}
/>

Collectives™ on Stack Overflow

why input value (type number) does not change with onChange attribute in React?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related