Skip to main content

Utility Functions

React Cool Form exports useful utility functions that can help you handle complex structures efficiently.

import { get, set, unset } from "react-cool-form";

get#

(object: Record<string, any>, path: string, defaultValue?: unknown) => any

Gets the value at path of object. If the resolved value is undefined, the defaultValue is returned in its place.

import { useForm, get } from "react-cool-form";
const { form } = useForm({
defaultValues: { foo: { bar: { baz: "" } } },
validate: (values) => {
const errors = {};
if (!get(values, "foo.bar.baz", "")) errors.foo.bar.baz = "Required";
return errors;
},
// ...
});

set#

(object: Record<string, any>, path: string, value: unknown, immutable?: boolean) => any

Sets the value at path of object. If a portion of path doesn't exist, it's created. Arrays are created for missing index properties while objects are created for all other missing properties.

import { useForm, set } from "react-cool-form";
const { form } = useForm({
defaultValues: { foo: { bar: { baz: "" } } },
validate: (values) => {
const errors = {};
if (!values.foo.bar.baz) {
// Mutable way
set(errors, "foo.bar.baz", "Required");
// Immutable way
errors = set(errors, "foo.bar.baz", "Required", true);
}
return errors;
},
// ...
});

unset#

(object: Record<string, any>, path: string, immutable?: boolean) => any

Removes the property at path of object.

  • If the property remains empty, the parent properties will be removed as well.
  • It will clear the redundant empty or undefined element(s) of an array.
import { useForm, unset } from "react-cool-form";
const { form } = useForm({
defaultValues: { foo: { bar: { baz: "" } } },
validate: (values) => {
const errors = {};
if (!values.foo.bar.baz) {
// ...
} else {
// Mutable way
unset(errors, "foo.bar.baz");
// Immutable way
errors = unset(errors, "foo.bar.baz", true);
}
return errors;
},
// ...
});