React state is empty when submitting the form

Question

I am not new to react, but for some weird reason, I have came across a quick example I was testing, and I noticed that the state is coming out empty string. as if it were not updating. I am using react 18.1, and here is a stack blitz instance to see the code live (a sandbox), click me.

Full code:

import React, { useState } from 'react';

export default function App() {
  const [qr, setQr] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    alert('The submitted QR code is: ', qr);
  };

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

  return (
    <form onSubmit={handleSubmit}>
      <input onChange={handleChange} value={qr} />
    </form>
  );
}

can anyone please explain why the state is not ready when submitting the form? and how do you work this out?

I was actually working on a larger project, and when I came across this bug, I decided to demonstrate this in a smaller quick example in a sandbox.

Thanks yous 👍

Jason · Accepted Answer · 2022-12-14 21:59:52Z

5

The issue is in your alert. The value is actually being updated on change, but alert only takes a single argument and you're passing it two.

Instead, you can concatenate the string like so to produce the desired result:

alert(`The submitted QR code is: ${qr}`);

answered Dec 14, 2022 at 21:59

Jason

1291 silver badge9 bronze badges

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

Comments

Matias Bertoni · Accepted Answer · 2022-12-14 22:05:46Z

1

alert should return a string, so you should give it a string:

 alert('The submitted QR code is: ', qr);
 // the ',' is not for concat

 // use instead:
 alert(`The submitted QR code is: ${qr}`);
 //or
 alert('The submitted QR code is: ' + qr);

answered Dec 14, 2022 at 22:05

Matias Bertoni

4983 silver badges8 bronze badges

Collectives™ on Stack Overflow

React state is empty when submitting the form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related