Tuesday, 22 March 2022

Handle Reset for specific field formik

I am new to react and I have just started using Formik I like how simple it makes making forms and handling forms in react. I have created multiple custom fields using formik, I am putting the react-select field I created as an example here.

import { ErrorMessage, Field } from "formik";
import React from "react";
import Select from 'react-select'

const SelectInput = (props) => {

  const { label, name, id,options, required, ...rest } = props;
  const defaultOptions = [
   {label : `Select ${label}`,value : ''} 
  ]
  const selectedOptions = options ? [...defaultOptions,...options] : defaultOptions
  return (
    <div className="mt-3">
      <label htmlFor={id ? id : name}>
        {label} {required && <span className="text-rose-500">*</span>}
      </label>
      <Field
        // className="w-full"
        name={name}
        id={id ? id : name} 
      >
          {(props) => {
          return (
            <Select
              options={selectedOptions}
              onChange={(val) => {
                props.form.setFieldValue(name, val ? val.value : null);
              }}
              onClick = {(e)=>{e.stopPropagation}}
              {...rest}
              // I want someting like onReset here
            ></Select>
          );
        }}
      </Field>
      <ErrorMessage
        name={name}
        component="div"
        className="text-xs mt-1 text-rose-500"
      />
    </div>
  );
};

export default SelectInput;

This is the usual code I use for submitting form as you can see I am using resetForm() method that is provided by formik, I want to attach the reseting logic in on submit method itself.

  const onSubmit = async (values, onSubmitProps) => {
    
    try {
      //send  request to api
      onSubmitProps.resetForm()
    } catch (error) {
      console.log(error.response.data);
    }
  };


from Handle Reset for specific field formik

No comments:

Post a Comment