ReactJs- Using Formik to write a form with axios

Question

I am creating a form for my website that takes in the contact information of a user. The site uses ReactJs for the client side and for the backend I am using NodeJs and ExpressJs.

I have been using FormikJs to create the form component. In the code below I have already created the form and will pass it to a higher order component built into Formik. I have found it useful for validation with Yup as well as speedily creating the layout of the form and some basic form functions but I am having trouble with actually getting it to send a users' input to the backend.

I am trying to use axios to send a POST request to "/send" (a route created with express) so that the backend part of my app could retrieve the contact information and use nodemailer to mail it to myself.

const FormikApp = withFormik({
mapPropsToValues: // props being mapped to values
},

validationSchema: // Yup Validation Schema

async handleSubmit(e, values, { resetForm, setErrors, setSubmitting }){
    const { name, company, phone, email, message} = this.value;

    const form = await axios.post("/send", {
        name,
        company,
        phone,
        email,
        message
    })
    resetForm();
    setSubmitting(false);

}
})(Forms);

My problem is that without "const { name, company, phone, email, message} = this.value;" an error is throwned that name, company, phone, email, and message are undefined. And with that line, everything renders fine but I am still unable to receive an email from using the form.

I am pretty sure I have set up the package.json file for the client and server site with the help of concurrently correctly and I do believe there is a problem with the form itself. I think that the handleSubmit function with formik is to blame but I do not know how I could fix this. It could be because I am not properly defining the values or not properly declaring that handleSubmit should be an asynchronous function. Could anyone help?

I am planning to just create the form from scratch without formik so I could have more control over the handleSubmit function and how the values are defined.

Thank you in advance to anyone who helps! Feel free to ask for code snippets, if necessary.

Where are you calling the variable "form" to actually post the data? — Andrew Bregman
– Andrew Bregman, Commented Jun 30, 2021 at 15:04

Iqbal Safian · Accepted Answer · 2019-12-25 13:30:44Z

1

I think you should change your code in line 8:

const { name, company, phone, email, message} = values;

answered Dec 25, 2019 at 13:30

Iqbal Safian

3963 silver badges4 bronze badges

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

Collectives™ on Stack Overflow

ReactJs- Using Formik to write a form with axios

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related