html

dynamic.js

<form onSubmit={formik.handleSubmit}>
        <h5>Handling dynamic validation with formik and yup</h5>
        <div
          className="text"
          style={{ backgroundColor: valid ? "green" : "red" }}
        >
          Valid Data: {"" + valid}
        </div>
        <input
          type="text"
          name="otherData"
          value={formik.values.otherData}
          onChange={handleChange}
          onBlur={formik.handleBlur}
        />
        <button type="submit">Submit</button>
        <br />
        {!valid && formik.touched.otherData && (
          <div className="blackText">this field is required</div>
        )}
</form>