I am building a form to take data from a user then save them in a state in order to post it to an endpoint later, so I saved the values of the input to an empty string and I will validate the inputs later but once I set the value to formValues elements and I open the browser to test my code , however how much I try to type anything in the input field, nothing is written. and in the console I appears that I take only one letter.
here is my code
import react, { Component, useState } from 'react';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
import './sign.css';
const Sign = () => {
const intialValues = { firstname: "", lastname: "", mobile: "", email: "", password: "", cpassword: "" }
const [formValues, setFormValues] = useState(intialValues);
const handleChange = (e) => {
const { name, value } = e.target;
setFormValues({ ...formValues, [name]: value });
}
const handleSubmit = (err) => {
err.preventDefault();
}
return (
<div className='signup'>
<form onSubmit={handleSubmit} >
<div className="container">
<h1>Sign Up</h1>
<div className="name">
<div>
<input
type="text"
placeholder="First name"
name="First name"
value={formValues.firstname}
onChange={handleChange}
required />
</div>
<div>
<input
type="text"
placeholder="Last name"
name="Last name"
value={formValues.lastname}
onChange={handleChange}
required />
</div>
</div>
<br />
<div>
<input
type="text"
placeholder="Business mobile number"
name="Business mobile number"
value={formValues.mobile}
onChange={handleChange}
required />
<br />
<input
type="text"
placeholder="Email Adress"
name="Email Adress"
value={formValues.email}
onChange={handleChange}
required />
<br />
<div className="password">
<input
type='password'
placeholder="Password"
name="psw"
id='password'
value={formValues.password}
onChange={handleChange}
required />
<FontAwesomeIcon icon={faEyeSlash} id='togglePassword' />
<br />
<input
type="password"
placeholder="Confirm Password"
name="Confirm Password"
id='Cpassword'
value={formValues.cpassword}
onChange={handleChange}
required />
<FontAwesomeIcon icon={faEyeSlash} id='togglePassword' />
</div>
</div>
<br />
<div className="checkbox">
<input type="checkbox" className="check" />i’ve read and agree with <a href="url" >Terms of service</a>
</div>
<div className="clearfix">
<button type="submit" className="signupbtn">Sign Up</button>
</div>
</div>
</form>
</div>
)
}
export default Sign;
CodePudding user response：
In your handleSubmit method, you are expecting the input element's name to be same as one of the initialValues object keys. But the input tag in your JSX does not specify correct value of the name attribute because of which the binding does not happen.
For each of your input tags in your JSX, change their name attribute to match the corresponding key of state object. For eg
<input
type="text"
placeholder="First name"
name="firstname"
value={formValues.firstname}
onChange={handleChange}
required />
CodePudding user response：
the names of the input fields are not the same as the names of the states (object keys) you have taken at the top, please change it like this,
import react, { Component, useState } from 'react';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
import './sign.css';
const Sign = () => {
const intialValues = { firstname: "", lastname: "", mobile: "", email: "", password: "", cpassword: "" }
const [formValues, setFormValues] = useState(intialValues);
const handleChange = (e) => {
const { name, value } = e.target;
setFormValues({ ...formValues, [name]: value });
}
const handleSubmit = (err) => {
err.preventDefault();
}
return (
<div className='signup'>
<form onSubmit={handleSubmit} >
<div className="container">
<h1>Sign Up</h1>
<div className="name">
<div>
<input
type="text"
placeholder="First name"
name="firstname"
value={formValues.firstname}
onChange={handleChange}
required />
</div>
<div>
<input
type="text"
placeholder="Last name"
name="lastname"
value={formValues.lastname}
onChange={handleChange}
required />
</div>
</div>
<br />
<div>
<input
type="text"
placeholder="Business mobile number"
name="mobile"
value={formValues.mobile}
onChange={handleChange}
required />
<br />
<input
type="text"
placeholder="Email Adress"
name="email"
value={formValues.email}
onChange={handleChange}
required />
<br />
<div className="password">
<input
type='password'
placeholder="Password"
name="password"
id='password'
value={formValues.password}
onChange={handleChange}
required />
<FontAwesomeIcon icon={faEyeSlash} id='togglePassword' />
<br />
<input
type="password"
placeholder="Confirm Password"
name="cpassword"
id='Cpassword'
value={formValues.cpassword}
onChange={handleChange}
required />
<FontAwesomeIcon icon={faEyeSlash} id='togglePassword' />
</div>
</div>
<br />
<div className="checkbox">
<input type="checkbox" className="check" />i’ve read and agree with <a href="url" >Terms of service</a>
</div>
<div className="clearfix">
<button type="submit" className="signupbtn">Sign Up</button>
</div>
</div>
</form>
</div>
)
}