how to dynamically show/hide input fields in Formik forms using the Yup's validation When()method?

Question

I am a beginner and trying to create a form in reactjs using Yup validation. I am trying to experiment with a very simple form that has firstName, lastName. And I am trying to only show lastName field when firstName is validated

using the useFormik hook

 const formik = useFormik({
        initialValues: {
            firstName: "",
            lastName: "",
            // email: ""
        }, 
        validationSchema: Yup.object({
            firstName : Yup.string().max(15,"Must be 15 chars or less").required("required"),
            lastName : Yup.string().when("firstName", {
                is:true,
                then: Yup.string().required("req")
            })
        }),
        onSubmit:(values) => {
            console.log(values)
        }
    })

Yup validation and on submit func

validationSchema: Yup.object({
            firstName : Yup.string().max(15,"Must be 15 chars or less").required("required"),
            lastName : Yup.string().when("firstName", {
                is:true,
                then: Yup.string().required("req")
            })
        }),
        onSubmit:(values) => {
            console.log(values)
        }
    })

My actual form

 <form onSubmit={formik.handleSubmit}> 
        <div className="input-container">
            <input
                id="firstName"
                name="firstName"
                type="text"
                placeholder="firstName"
                onChange={formik.handleChange}
                value={formik.values.firstName}
            />
             {formik.errors.firstName ? <p>{formik.errors.firstName}</p> : null}
        </div>
        <div className="input-container">
            <input
                id="lastName"
                name="lastName"
                type="text"
                placeholder="lastName"
                onChange={formik.handleChange}
                value={formik.values.lastName}
            />
           
        </div>
       
        <button type="submit">Submit</button>
    </form>

Not sure if should hide/show the lastName input field in the form, I have already declared it inside Formik initial values object.

Answer 1

There are two things to deal with here:

1. It looks like you only want to require lastName when firstName has a value. If that assumption is correct, you can do something like this:

...
Yup.object({
  firstName: Yup.string().max(15, "Must be 15 chars or less").required("required"),
  lastName: Yup.string().when("firstName", {
    is: (firstName) => !!firstName,
    then: Yup.string().required("req"),
  }),
)},
...

In the above example, is: (firstName) => !!firstName is checking if firstName has a value. If you wanted to require lastName only when firstName is valid, you could change that line to is: (firstName) => firstName && firstName.length <= 15

2. If you only want to show the last name input when first name is valid, this should work:

<form onSubmit={formik.handleSubmit}>
  ...
  {!formik.errors.firstName ? (
    <div className="input-container">...</div>
  ) : null}
  ...
</form>

You could also shorten it a bit but the above solution should work. Shortened version:

<form onSubmit={formik.handleSubmit}>
  ...
  {!formik.errors.firstName && (
    <div className="input-container">...</div>
  )}
  ...
</form>