How do I display API error messages using Formik?

237 views Asked by At

I am using Formik/Yup in my frontend to validate form data, which is working fine. Once the form is submitted, I have the backend Express server set to return an array of errors like:

{username: 'Username not available'}

I need to display the above error message for the username field. How should I go about doing that?

My Material UI textfield looks like this:

                    <TextField
                      variant="standard"
                      name="username"
                      required
                      fullWidth
                      id="username"
                      label="Username"
                      onChange={handleChange}
                      onBlur={handleBlur}
                      error={touched.username && Boolean(errors.username)}
                      helperText={touched.username && errors.username}
                      autoFocus
                    />

Any help would be appreciated.

0

There are 0 answers