I'm using Formik to create a generic contact form in react. I am getting data from my api and attempting to call Formik's setStatus to generate a message to show that the form has been submitted successfully.

For whatever reason the Status state never gets updated to reflect what I put in setStatus.

Here's my code:

import { Formik, Form, useField } from "formik";
import * as Yup from "yup";
import axios from "axios";
import Button from "ponents/shared/button";
import "styles/contact/form.scss";

const handleSubmit = (values, actions) => {
    axios.post("http://localhost:5000/sendemail/", values).then(res => {
        actions.setSubmitting(false);
        actions.setStatus = {
            message: res.data.message
        };
        setTimeout(() => {
            actions.resetForm();
        }, 3000);
    });
};

const FormField = ({ label, tagName, ...props }) => {
    const [field, meta] = useField(props);
    const errorClass = meta.touched && meta.error ? "error" : "";
    const TagName = tagName;
    return (
        <>
            <label htmlFor={props.id || props.name}>
                {label}
                {meta.touched && meta.error ? (
                    <span className="error">{meta.error}</span>
                ) : null}
            </label>
            <TagName
                className={`form-control ${errorClass}`}
                {...field}
                {...props}
            />
        </>
    );
};

const ContactForm = () => (
    <Formik
        initialValues={{ name: "", email: "", msg: "" }}
        validationSchema={Yup.object({
            name: Yup.string().required("Required"),
            email: Yup.string()
                .email("Invalid email address")
                .required("Required"),
            msg: Yup.string().required("Required")
        })}
        onSubmit={handleSubmit}>
        {({ isSubmitting, status }) => (
            <Form className="contact-form">
                <div className="row form-group">
                    <div className="col">
                        <FormField
                            label="Name"
                            name="name"
                            type="text"
                            tagName="input"
                        />
                    </div>
                    <div className="col">
                        <FormField
                            label="Email"
                            name="email"
                            type="text"
                            tagName="input"
                        />
                    </div>
                </div>
                <div className="form-group">
                    <FormField label="Message" name="msg" tagName="textarea" />
                </div>
                {status && status.message && (
                    <div className="message">{status.message}</div>
                )}
                <Button
                    id="formSubmit"
                    text="Send Message"
                    type="submit"
                    isSubmitting={isSubmitting}
                />
            </Form>
        )}
    </Formik>
);

export default ContactForm;

Just before my submit button, it should show the <div class="message">Success message</div> after submitting the form. When I try to debug the value of Status is always "undefined".

Any one have a clue what I'm doing wrong here?

I'm using Formik to create a generic contact form in react. I am getting data from my api and attempting to call Formik's setStatus to generate a message to show that the form has been submitted successfully.

For whatever reason the Status state never gets updated to reflect what I put in setStatus.

Here's my code:

import { Formik, Form, useField } from "formik";
import * as Yup from "yup";
import axios from "axios";
import Button from "ponents/shared/button";
import "styles/contact/form.scss";

const handleSubmit = (values, actions) => {
    axios.post("http://localhost:5000/sendemail/", values).then(res => {
        actions.setSubmitting(false);
        actions.setStatus = {
            message: res.data.message
        };
        setTimeout(() => {
            actions.resetForm();
        }, 3000);
    });
};

const FormField = ({ label, tagName, ...props }) => {
    const [field, meta] = useField(props);
    const errorClass = meta.touched && meta.error ? "error" : "";
    const TagName = tagName;
    return (
        <>
            <label htmlFor={props.id || props.name}>
                {label}
                {meta.touched && meta.error ? (
                    <span className="error">{meta.error}</span>
                ) : null}
            </label>
            <TagName
                className={`form-control ${errorClass}`}
                {...field}
                {...props}
            />
        </>
    );
};

const ContactForm = () => (
    <Formik
        initialValues={{ name: "", email: "", msg: "" }}
        validationSchema={Yup.object({
            name: Yup.string().required("Required"),
            email: Yup.string()
                .email("Invalid email address")
                .required("Required"),
            msg: Yup.string().required("Required")
        })}
        onSubmit={handleSubmit}>
        {({ isSubmitting, status }) => (
            <Form className="contact-form">
                <div className="row form-group">
                    <div className="col">
                        <FormField
                            label="Name"
                            name="name"
                            type="text"
                            tagName="input"
                        />
                    </div>
                    <div className="col">
                        <FormField
                            label="Email"
                            name="email"
                            type="text"
                            tagName="input"
                        />
                    </div>
                </div>
                <div className="form-group">
                    <FormField label="Message" name="msg" tagName="textarea" />
                </div>
                {status && status.message && (
                    <div className="message">{status.message}</div>
                )}
                <Button
                    id="formSubmit"
                    text="Send Message"
                    type="submit"
                    isSubmitting={isSubmitting}
                />
            </Form>
        )}
    </Formik>
);

export default ContactForm;

Just before my submit button, it should show the <div class="message">Success message</div> after submitting the form. When I try to debug the value of Status is always "undefined".

Any one have a clue what I'm doing wrong here?

• javascript
• reactjs
• formik

1 Answer 1

The reason it wasn't working is because I tried to set the value of setStatus equal to an object. What I should have done was used it as a method and pass the object as a parameter.

Like so:

actions.setStatus({message: res.data.message});

I feel silly for missing this simple mistake for so long.