DEV Community

Cover image for Getting formik dirty values on submit
Vinicius Blazius Goulart
Vinicius Blazius Goulart

Posted on

Getting formik dirty values on submit

Formik is a react library to build forms, you register the values and send them in your onSubmit function. If you have an API Route that does a put, everything goes right, but you send more data than necessary in a patch.

So, how to get only dirty values in formik?

To do this, we need to compare it's current value on submit with it's initial value.

Let's start configuring formik data:

type PersonParams = {
  name: string;
  age: string;
};

const person = {
  name: 'vinicius',
  age: '19',
};

const Component = () => {
  const onSubmit = async (values: PersonParams) => {
    const payload = values;
  }

  const formik = useFormik<PersonParams>({
    initialValues: {
      name: person.name,
      age: person.age,
    },
    onSubmit,
  });

  const { initialValues } = useFormik(formik)
};
Enter fullscreen mode Exit fullscreen mode

The form starts with name = 'vinicius' and age = 19. Now, imagine the user changes age to 20 and submits the form. All fields will be sent, including name which has not been changed.

Now let's create a function to get only dirty values:

const getDirtyValues = <T>(values, initialObject: T): object => {
  const data = { ...values };
  const keyValues = Object.keys(data);

  const dirtyValues = keyValues.filter(
    (keyValue) => data[keyValue] !== initialObject[keyValue],
  );

  keyValues.forEach((key) => {
    if (!dirtyValues.includes(key)) delete data[key];
  });

  return data;
};

export { getDirtyValues };
Enter fullscreen mode Exit fullscreen mode

The function compares the current value with the initial value, if it is equal, it deletes.

Now instead submit all values, we call getDirtyValues function to get only dirty values.

const onSubmit = async (values: PersonParams) => {
    // payload = { age: '20' }
    const payload = getDirtyValues<PersonParams>(values, initialValues);
  }
Enter fullscreen mode Exit fullscreen mode

That it's all, now we can get only the dirty fields and send them in our patch.


Gist: https://gist.github.com/vinibgoulart/845aefd6cd5c086417c7933e6760fbc6


See more in zettelkasten


Foto de No Revisions na Unsplash

Top comments (0)