react formik + axios post, Data returns undefined in backend

Question

I am trying to post data with axios with a formik form but when I checked my backend, data keeps returning undefined seems like the backend isn't receiving the data at all, and browser responds with AxiosError and server response 500, Moreover I am also getting another error A component is changing a controlled input to be uncontrolled after I submitted the form

this is my signup function with formik and axios.post

 function Test() {
  const validate = Yup.object({
    name: Yup.string()
      .max(15, 'Must be 15 characters or less')
      .required('Required'),
    email: Yup.string()
      .email('Email is invalid')
      .required('Email is required'),
    password: Yup.string()
      .min(6, 'Password must be at least 6 charaters')
      .required('Password is required')
  })
  return (
    <Formik
      initialValues={{
        name: '',
        email: '',
        password: ''
      }}
      validationSchema={validate}
      onSubmit={data => {
        console.log(data)
        let formData = new FormData();
        formData.append('name', data.name)
        formData.append('email', data.email)
        formData.append('password', data.password)

        axios({
            method: 'POST',
            url: 'http://localhost:5000/userdata',
            data: formData
        })
        .then(function (res) {
            console.log(res)
            alert('Successfully signed up!');  
        })
        .catch(function (res) {
            console.log(res)
        });
      }}
    >
      {formik => (
        <div className='fbody'>
          <div className='fcontainer'>
          <div className="contact-box">
            <div className="right">
              <h1 className="my-4 font-weight-bold .display-4">Sign Up</h1>
              <Form>
                <TextField className="field" label="First Name" name="name" type="text" />
                <TextField className="field" label="Email" name="email" type="email" />
                <TextField className="field" label="password" name="password" type="password" />
                <button className="btn" type="submit">Register</button>
                <button className="btn" type="reset">Reset</button>
            </Form>
            </div>
            </div>
          </div>
        </div>
      )}
    </Formik>
  )
}

export default Test;

Haseeb Anwar · Accepted Answer · 2022-08-01 09:48:15Z

1

There are a few things wrong with your component.

Your inputs are not controlled. Add value and onChange props to your inputs like:

<TextField
  className="field"
  label="First Name"
  name="name"
  type="text"
  value={formik.values.name}
  onChange={formik.handleChange}
/>

And then update the onSubmit handler. You don't need to do new FormData()

onSubmit={data => {
  console.log(data);

  axios({
    method: 'POST',
    url: 'http://localhost:5000/userdata',
    data: data
  })
    .then(function (res) {
       console.log(res)
       alert('Successfully signed up!');  
    })
    .catch(function (res) {
       console.log(res)
  });
}}

answered Aug 1, 2022 at 9:48

Haseeb Anwar

2,96824 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pedram afra · Accepted Answer · 2022-08-01 05:56:45Z

1

you forgot to add multipart/formData header to your axios request:

 axios({
    method: 'POST',
    url: 'http://localhost:5000/userdata',
    data: formData,
    headers: {'Content-Type': 'multipart/form-data'}
 })

answered Aug 1, 2022 at 5:56

pedram afra

1,2321 gold badge12 silver badges20 bronze badges

Collectives™ on Stack Overflow

react formik + axios post, Data returns undefined in backend

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related