YUP schema validation for existing input

Question

I am trying to create a schema to validate if the entered input is not already in an array. If it is, then i need to log an error to the user. E.g. if the entered input value "apple" is already in some array ["apple", "mango", "banana"] then i need to show the message "Fruit already exists". What's the validation schema for that?

Thanks

Answer 1

import React, { useState } from "react";
import { Formik, Form, ErrorMessage } from "formik";
import * as Yup from "yup";


const Fruit = (props) => {
  // Use State to update the array if required
  const [fruits, setFruits] = useState(["apple", "mango", "banana"]);

  const validationSchema = Yup.object().shape({
    fruit: Yup.string()
      .test("fruit", "Fruit already exists", (value) => !fruits.includes(value)) //check if fruit is present in state array
      .required("Required"),
  });

  return (
    <>

      <Formik
        initialValues={{ fruit: "" }}
        validationSchema={
          validationSchema
        }
        onSubmit={(val) => { }}
      >
        {({
          handleChange,
          handleBlur,
        }) => (

          <Form>

            <input
              type="text"
              name="fruit"
              onChange={handleChange}
              onBlur={handleBlur}
            />
            <br />
            <ErrorMessage name="fruit" />

          </Form>
        )}
      </Formik>
    </>
  );
};

export default Fruit;