How to display data entered in input field in react js?

Question

I want to show the username in the alert box. But so far it's not working. Here is my code:

function App() {

  const [nameInForm, setNameInForm] = useState("");

  const [username, setUserName] = useState("");

  const inputName = (event) => {
       setNameInForm(event.target.value);
  }

  const handleSubmit = () => {
       setUserName(nameInForm);
       alert("Welcome " + username);
  }

  return (
     <>
      <form onSubmit={handleSubmit}>
        <input type="text" value={nameInForm} onChange={inputName} />
        <button type="submit"> Login </button>
      </form>
     </>
  );
 }

If I don't use the form tag and use onClick={handleSubmit} on the button still the code does not work.

State updates are asynchronous. Alert is being called before the state of userName is set. You can solve this by setting the username in the onChange function. — kevin, Jul 08 '21 at 08:33
Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — Yoshi, Jul 08 '21 at 08:36
Ref: [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) and [How do JavaScript closures work?](https://stackoverflow.com/questions/111102/how-do-javascript-closures-work). Note: It has absolutely nothing to do with state updates being asynchronous. — Yoshi, Jul 08 '21 at 08:38

score 1 · Answer 1 · answered Jul 08 '21 at 08:34

1

Setting state is kinda async operation. You can not use the new state value on the next line of code in console.log() or alerts etc... In your example, you already have the username in "nameInForm" state, you can use it

const handleSubmit = () => {
  setUserName(nameInForm);
  alert("Welcome " + nameInForm);
}

either "username" and useEffect hook can be used which is nice way to watch state changes:

//the function is updating state:
const handleSubmit = () => {
  setUserName(nameInForm);
}
// the useEffect hook shows new state after it has been updated
useEffect(() => {
  alert("Welcome " + username);
}, [username])

answered Jul 08 '21 at 08:34

Tarukami

1,160
5
8

But this alerts on each action right? He wants that on submit. – Prashanth Damam Jul 08 '21 at 08:36
alert is called only when 'username' is changed on submit, not when input values while editing text input. – Tarukami Jul 08 '21 at 08:38
Yep. I was confused with the second state. This is the right way, I agree – Prashanth Damam Jul 08 '21 at 08:40

score 0 · Answer 2 · answered Jul 08 '21 at 08:31

0

You should not call setUserName in handleSubmit. As setUserName is asynchronous it will be resolved on next render so you should do

const handleSubmit = () => {
       alert("Welcome " + nameInForm);
}

answered Jul 08 '21 at 08:31

Matthieu Bouxin

127
1
5

How to display data entered in input field in react js?

2 Answers2