React form is sending only one property of state, rather than entire state

I am attempting to send form data from my react client to my nodejs server; however, upon submitting the form, only the last property of the state is sent to my server. I know this is a client side issue, since with Postman, my entire form data is sent to my database.

It seems when I add a value to each property in my state, only that property is maintained in user. I haven’t been able to resolve this in the time I allotted myself, so I would appreciate another perspective / feedback on the issue.

const ModalForm = ({ show }) => {
  if (!show) {
    return null;
  let [user, setUser] = useState({
    firstName: '',
    lastName: '',
    email: '',
    password: '',
    age: ''

  let handleChange = (e) => {
    console.log('event name',, 'event value',;

    currently, only the last prop and value are sending to my API
    need to resolve so that all form data is sent to API
  let handleSubmit = (e) => {
    let data = user;
    setUser({[]:});'/new/user', data)
    .then(res => console.log(res))
    .catch(err => console.error(err))
  console.log('user:', user);
  return (
    <div className='form-container'>
      <form className='form-space' onSubmit={handleSubmit}>
          First Name:<br/>
          <input type='text' name='firstName' onChange={handleChange}/>
          Last Name:<br/>
          <input type='text' name='lastName' onChange={handleChange}/>
          <input type='email' name='email' onChange={handleChange}/>
          <input type='password' name='password' onChange={handleChange}/>
          <input type='text' name='age' onChange={handleChange}/>
        <input type='submit' value='Submit' />

export default ModalForm;

87 thoughts on “React form is sending only one property of state, rather than entire state”

Leave a Comment