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;

CodePudding user response：

the name is doesn't passed

Example:

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

and you don't need to declare let name, value; outside the function

Function should look like :

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

or

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

CodePudding user response：

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"

CodePudding user response：

Everything looks great.Accept this line of code

<input type="submit" onClick={postData} className="butt" value={"Create Account"}/>