DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Yup.array validate object property is unique with Formik in React.
Anlisha Maharjan
Anlisha Maharjan

Posted on • Originally published at anlisha.com.np on

Yup.array validate object property is unique with Formik in React.

The requirement is to validate objects in users array has unique name property.

Define a custom method in Yup using Yup.addMethod. Yup.js provides this function to conveniently reuse test functions. Function has to either return true or false to indicate if testing has failed or not respectively, or a new ValidationError created through this.createError().

Yup.addMethod(Yup.array, "unique", function (message, path) {
  return this.test("unique", message, function (list) {
    const mapper = (x) => get(x, path);
    const set = [...new Set(list.map(mapper))];
    const isUnique = list.length === set.length;
    if (isUnique) {
      return true;
    }
    const idx = list.findIndex((l, i) => mapper(l) !== set[i]);
    return this.createError({path: `users[${idx}].${path}`,message});
 });
});
Enter fullscreen mode Exit fullscreen mode

With Yup, we create a Yup formatted object that resembles our intended schema for an object.

const schema = Yup.object().shape({
 users: Yup.array().of(
   Yup.object().shape({
     name: Yup.string().required("Name is required"),        
   })).unique("Duplicate user", "name")
});
Enter fullscreen mode Exit fullscreen mode

Formik has a special config option / prop for Yup object schemas called validationSchema which will automatically transform Yup’s validation errors into a pretty object whose keys match values and touched. Set the validationSchema option to the schema created above.

Use FieldArray that helps with common array/list manipulations. Pass it a name property name=”users”. FieldArray will give access to array helper methods via render props.

Note on line 57, arrayHelpers.push add a value to the end of an array. Similarly, arrayHelpers.remove on line 104 remove an element at an index of an array and return it.

Field hooks up inputs to Formik. Note the name attribute on line 82; it uses to match up with Formik state.

Thank you for reading!

The post Yup.array validate object property is unique with Formik in React. first appeared on Anlisha Maharjan.

Top comments (0)

DEV

Thank you.

Β 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.