Question 209807 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – on conditional select input field branch is not a function

I am working on a application based on false i have to display end date.

my schema:

export const experienceSchema = yup.object().shape({
      experience: yup.string().required(),
      job_title: yup.string().required(),
      category: yup.string().required(),
        current_working_status: yup.string().required(),
        join_date: yup.date().required(),
        end_date: yup.date().notRequired().when("current_working_status", {
          is: "false",
          then: yup.date().required("Please enter date")
        })
  })

my html:

<div className="mt-2">
                <label className="fw-medium">Currently Working<sup>*</sup></label>
                <div className="input-group">
                <select
                      className="form-select"
                      id="select-example"
                      name="current_working_status"
                      onChange={formik.handleChange}
                      onBlur={formik.handleBlur}
                      value={formik.values.current_working_status}
                    >
                      <option value="">Select an option</option>
                      <option value={true}>Yes</option>
                      <option value={false}>No</option>
                    </select>
                </div>
                {formik.touched.current_working_status && formik.errors.current_working_status ? (
                  <div className="edit_error">{formik.errors.current_working_status}</div>
                ) : null}
              </div>

<div className="d-md-flex justify-content-between my-3">
                <div className=" col-md-5">
                  <label className="fw-medium">Joining Date<sup>*</sup></label>
                  <div className="input-group">
                    <input
                      type="date"
                      id="join_date"
                      name="join_date"
                      className="form-control"
                      placeholder="join_date"
                      onChange={formik.handleChange}
                      onBlur={formik.handleBlur}
                      value={formik.values.join_date}
                    />
                  </div>
                  {formik.touched.join_date && formik.errors.join_date ? (
                    <div className="edit_error">{formik.errors.join_date}</div>
                  ) : null}
                </div>


                `{formik.values.current_working_status !== 'true'?
                  <div className=" col-md-5">
                    <label className="fw-medium">End Date</label>
                    <div className="input-group">
                      <input
                        type="date"
                        id="end_date"
                        name="end_date"
                        className="form-control"
                        placeholder="end_date"
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        value={formik.values.end_date}
                      />
                    </div>
                    {formik.touched.end_date && formik.errors.end_date ? (
                      <div className="edit_error">{formik.errors.end_date}</div>
                    ) : null}
                  </div> : ''
                }
              </div>

if user select currently working on yes, i just want to use join date, if select no i want use both join and end date. vice versa i want to validate.

When i select on no i am getting error as :

branch is not a function
TypeError: branch is not a function

Kindly please help me at this problem.

Using conditional validation i have inserted code still i am unable to work on it.

Tags:

2

Answers


  1. 0

    To fix this issue, you can modify your schema definition as follows:

    export const experienceSchema = yup.object().shape({
  experience: yup.string().required(),
  job_title: yup.string().required(),
  category: yup.string().required(),
  current_working_status: yup.boolean().required(),
  join_date: yup.date().required("Please enter a valid date"),
  end_date: yup.date().when("current_working_status", {
    is: false,
    then: yup.date().required("Please enter a valid date"),
    otherwise: yup.date().notRequired()
  })
});
    Login or Signup to reply.
  2. 0

    The then property expects a function:

    //...
end_date: yup.date().when("current_working_status", {
  is: "false",
  then: () => yup.date().required("Please enter a valid date"),
  otherwise: () => yup.date().notRequired()
}),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search