1
import "./styles.css";

import React, {useState} from 'react';

function App() {
  const [name, SetName] = useState('')

const changeHandler = (e) => {
  SetName(e.target.value)
  console.log(name)
}

  return (
    <main>
      <input
      onChange={changeHandler}
      value={name}
       />
    </main>
  );
}

export default App;

I am trying to display name from the input box, But the last character isn't visible. I tried replacing onChange with onKeyUp but the result was same. For e.g, If I type John as an input, the console only outputs Joh and skips n. Why is this happening?

link for REPL : https://replit.com/join/lqcehsaifp-gouravthakur

Screenshot for you to understand problem better

enter image description here

Gourav Thakur
  • 231
  • 2
  • 3
  • 15

2 Answers2

4

it works fine, but you have to console.log after your function end; actually hooks work after end of your function.

Sepehr Pourjozi
  • 129
  • 3
0

Setstate functions works asynchronously so in your change handler function your console.log executes before the setstate function. If you console.log name above the return statement you can see that It changes perfectly fine

Vipul waghmare
  • 26
  • 5