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;

>Solution :

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 />