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
– kevin, Commented Jul 8, 2021 at 8:33
Does this answer your question? useState set method not reflecting change immediately — Yoshi
– Yoshi, Commented Jul 8, 2021 at 8:36
Ref: useState set method not reflecting change immediately and How do JavaScript closures work?. Note: It has absolutely nothing to do with state updates being asynchronous. — Yoshi
– Yoshi, Commented Jul 8, 2021 at 8:38

Tarukami · Accepted Answer · 2021-07-08 08:34:43Z

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 8, 2021 at 8:34

Tarukami

1,1607 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Prashanth Damam Over a year ago

But this alerts on each action right? He wants that on submit.

Tarukami Over a year ago

alert is called only when 'username' is changed on submit, not when input values while editing text input.

Prashanth Damam Over a year ago

Yep. I was confused with the second state. This is the right way, I agree

Matthieu Bouxin · Accepted Answer · 2021-07-08 08:31:44Z

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 8, 2021 at 8:31

Matthieu Bouxin

1271 silver badge5 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related