CODEWITHSUNDEEP
reactjsaxiosformik
rstowe1
rstowe1

Reputation: 81

Clear Formik form on submission not working, what am i doing wrong?

I am trying to find a way to clear this form on submit, nothing i have tried has helped. I would appreciate any insight as to what I am doing wrong!

I have tried adding resets and onClick events to set the data back to initial values, but nothing I do seems to work.

FormJr.js

import React from "react";
import { useFormik } from "formik";
import axios from "axios";
const Form = ({ load, setLoad }) => {
  const formik = useFormik({
    initialValues: {
      name: "",
      date: "",
      comment: ""
    },
    onSubmit: values => {
      setLoad(load !== true ? true : false);
      axios
        .post(`https://lq-time-tracking.firebaseio.com/${name}.json`, values)
        .then(function(response) {})
        .catch(function(error) {
          console.log(error);
        });
    }
  });
  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="name">Name</label>
      <select
        id="name"
        name="name"
        type="name"
        onChange={formik.handleChange}
        value={formik.values.name}
      >
        <option value=""> Select One...</option>
        <option value="Ryan">Ryan</option>
        <option value="Patrick">Patrick</option>
        <option value="Jennifer">Jennifer</option>
        <option value="Dan">Dan</option>
      </select>
      <label htmlFor="date">Date</label>
      <input
        id="date"
        name="date"
        type="date"
        onChange={formik.handleChange}
        value={formik.values.date}
      />
      <label htmlFor="comment">Comment</label>
      <input
        id="comment"
        name="comment"
        type="comment"
        onChange={formik.handleChange}
        value={formik.values.comment}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default Form;

Upvotes: 0

Views: 658

Answers (1)

soeik
soeik

Reputation: 925

Try formik.resetForm() in your onSubmit()

const formik = useFormik({
    initialValues: {
      name: "",
      date: "",
      comment: ""
    },
    onSubmit: values => {
      formik.resetForm()
    }
  });

Upvotes: 1

Related Questions