Html Form is not taking input on using handlechange event as use state hook

January 8, 2023

I have created a register page and tried to access the input value using handleChange event but the form is not taking any input. If the ‘value=""’ field of form elements is commented or their values are set null then the form is working. I tried by declaring a global

const {name, email, phone, work, password, cpassword} = user;

and passed the attributes to their respective value="" field but still not worked. How to solve this issue?

This is the code of my signup page.

import React ,{useState} from "react";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap";
import "../css/Signup.css"
import img from "../imgs/register.png"
import { NavLink } from "react-router-dom";

const Signup = ()=>{
  const [user, setUser] = useState({
    name:"", email:"", phone:"", work:"", password:"", cpassword:""
  });

  let name, value;
  const handleChange = (event)=>{
    name = event.target.name;
    value = event.target.value;
    setUser({...user, [name]:value});
  }

  

  const postData = (event)=>{
   
  }
    return (
      <section className="section-container">
        <div className="container">
          <div className="myCard">
            <div className="row">
              <div className="col-md-6">
                <div className="myLeftCtn">
                  <form className="myForm text-center" method="POST">
                    <header>Sign Up</header>
                    <div className="form-group">
                      <i className="fas fa-user"></i>
                      <input className="myInput" type={"text"} 
                      value={user.name}
                      onChange={handleChange}  
                      placeholder="Username" id="username" required></input>
                    </div>

                    <div className="form-group">
                      <i className="fas fa-envelope"></i>
                      <input className="myInput" type={"text"} 
                      value={user.email}
                      onChange={handleChange} 
                      placeholder="Email" id="email" required></input>
                    </div>

                    <div className="form-group">
                      <i className="fas fa-phone"></i>
                      <input className="myInput" type={"text"} 
                      value={user.phone}
                      onChange={handleChange} 
                      placeholder="Mobile Number" id="phone" required></input>
                    </div>

                    <div className="form-group">
                      <i className="fas fa-user-tie"></i>
                      <input className="myInput" type={"text"} 
                      value={user.work}
                      onChange={handleChange} 
                      placeholder="Profession" id="work" required></input>
                    </div>

                    <div className="form-group">
                      <i className="fas fa-lock"></i>
                      <input className="myInput" type={"password"} 
                      value={user.password}
                      onChange={handleChange} 
                      placeholder="Password" id="password" required></input>
                    </div>

                    <div className="form-group">
                      <i className="fas fa-lock"></i>
                      <input className="myInput" type={"password"} 
                      value={user.cpassword}
                      onChange={handleChange} 
                      placeholder="Confirm Password" id="cpassword" required></input>
                    </div>

                    <div className="form-group">
                      <label>
                        <input id="check_1" name="check_1" type={"checkbox"} required />
                          <small>I read and agree to Terms and Conditions</small>
                          <div className="invalid-feedback">You must check the box.</div>
                        </label>
                    </div>
                    <input type={"submit"} onClick={postData} className="butt" value={"Create Account"}/>

                  </form>
                </div>
              </div>
              <div className="col-md-6">
              <div className="box"> 
                  <figure>
                  <img className="signup-img" src={img} alt="signup-img"></img>
                  </figure>
                  <div className=""><NavLink className="butt_out" to="/login">I am already registered</NavLink></div>
                  
                  
                  </div>
              </div>
              
            </div>
          </div>
        </div>
      </section>
    )
}

export default Signup;

>Solution :

Your event.target.name will always be "". You will need to add name attribute to your form like so:

 <input className="myInput" type={"text"} name="name"
                      value={user.name}
                      onChange={handleChange}  
                      placeholder="Username" id="username" required></input>

Alternatively, you can use event.target.id, but you will need to update your form so it matches the user object. E.g. input for username should have an id of "name"