React Form submission Bug

Question

I've been trying to create a registration form, and storing the data on my browser, using localStorage, but the bug I'm facing is that, only on clicking two times on the register button, the data gets stored on the browser

I've created states for the inputs, and called the the handleSubmit function, on submission of the form and expecting the data to be stored on the browser, on the first click of the button

below is the code is the code I have written

import React, {useState} from "react";
import { Form, Button, Container } from "react-bootstrap";
import { Link } from "react-router-dom";

const Register = () => {
  let [users, setUsers] = useState([])
  let [name, setName] = useState('');
  let [email, setEmail] = useState('');
  let [pswd, setPswd] = useState(''); 

  const handleSubmit = (e)=>{
    e.preventDefault()
    let newData = {uName:name, uEmail:email, uPswd:pswd}
    let newValues = [...users, newData];
    setUsers(newValues);
    localStorage.setItem('users', JSON.stringify(users))
  }

  return (
    <>
      <Container className="border border-success bg-success mt-5">
        <div className="mt-5 d-flex flex-column align-items-center jusitify-content-center">
        <h1 className="text-white">Create An Account</h1>
        <Form className="my-5 w-100" onSubmit={(e)=>handleSubmit(e)}>
          <Form.Group className="mb-3" controlId="formBasicEmail">
            <Form.Label className="text-white">Your Name</Form.Label>
            <Form.Control type="text" placeholder="Enter your name" value={name}  onChange={(e)=>setName(e.target.value)}/>
          </Form.Group>

          <Form.Group className="mb-3" controlId="formBasicEmail">
            <Form.Label className="text-white">Email address</Form.Label>
            <Form.Control type="email" placeholder="Enter email" value={email} onChange={(e)=>setEmail(e.target.value)}/>
          </Form.Group>

          <Form.Group className="mb-3" controlId="formBasicPassword">
            <Form.Label className="text-white">Password</Form.Label>
            <Form.Control type="password" placeholder="Password" value={pswd} onChange={(e)=>setPswd(e.target.value)}/>
          </Form.Group>

          <div className="w-100 d-flex justify-content-center">
          <Button variant="dark" type="submit" className="py-2 px-4 fs-4 fw-bold">
            Register
          </Button>
          </div>

          <div className="text-center pt-4">
            <p className="text-white">Have an account already? <Link to={'/login'} className='text-dark fw-bold'>Login here</Link></p>
          </div>
        </Form>
        </div>
      </Container>
    </>
  );
};

export default Register;

it will be helpful if You can help me with that – Athing Feb 20 '23 at 17:04 — Athing, Feb 20 '23 at 17:04

score 1 · Answer 1 · answered Feb 20 '23 at 17:09

When the handleSubmit function is created, it takes the current value of users. On the very first creation, this value is []. When you submit the form, you create a new array called newUsers and add the newValues object in this array.

You then call setUsers to set the new value of the users state, but it will not be reflected immediately. React will wait till the event handler has completed its execution, and then re-render the component. When this is done, a new handleSubmit function will be created, and this will get the "updated" value for users. Now the users array will include the object you last added to it.

In your current code, you are setting users in localStorage, which still has the old value.

To fix this, you can simply use this:

localStorage.setItem('users', JSON.stringify(newValues)) // use newValues instead of users

React Form submission Bug

1 Answers1