onChange effect after second entry

Question

I'm a bit new with ReactJS and I have a problem with my onChange function, it starts displaying after the second entry and it is one letter late every time. And I clearly don't understand why

Here is my code:

const [values, setValues] = useState({
    latinName: "",
    wingLength: "",
    weight: "",
    adiposity: "",
    age: "",
    howCaptured: "",
    whenCaptured: "",
    whereCaptured: "",
    ringNumber: "",
    takeover: "",
});

const handleChange = (e) => {
    const { name, value } = e.target;

    setValues({
        ...values,
        [name]: value,
    });

    console.log(values);
}

<input type="text" name="latinName" id="latinName" onChange={handleChange} value={values.latinName} />

Here my input

Here my result

`setState` is async ,so you see the previous value – Shubham Dixit Apr 10 '21 at 20:05 — Shubham Dixit, Apr 10 '21 at 20:05

score 1 · Accepted Answer · answered Apr 10 '21 at 20:18

useState hook's setState works async. As a result, during state update, you are still getting the previous value in the mean time.

You can use useEffect hook in your case.

useEffect(() => console.log(values), [values]);

Full code:

import { useEffect, useState } from "react";

export default function App() {
  const [values, setValues] = useState({
    latinName: "",
    wingLength: "",
    weight: "",
    adiposity: "",
    age: "",
    howCaptured: "",
    whenCaptured: "",
    whereCaptured: "",
    ringNumber: "",
    takeover: ""
  });

  useEffect(() => console.log(values), [values]);

  const handleChange = (e) => {
    const { name, value } = e.target;

    setValues({
      ...values,
      [name]: value
    });
  };

  return (
    <input
      type="text"
      name="latinName"
      id="latinName"
      onChange={handleChange}
      value={values.latinName}
    />
  );
}

CodeSandBox Demo

Perfect it works, I understand a little better how it works! Thanks :) — ZeDOver, Apr 11 '21 at 14:48

onChange effect after second entry

1 Answers1