How to show Form error summary using Formik with yup validationSchema

Question

I want to show a summary of all errors found by yup validationSchema.

My CodeSandbox example: https://codesandbox.io/s/7m3n44po80

This is how it should look like

How it should look like if there are errors on submit. In the screenshot the error summary is hardcoded just as in my CodeSandbox:

I couldn't find any "hook" where I can grab all the validation errors.

Answer 1

You've got an errors prop passed to your component when using withFormik

For example: https://codesandbox.io/s/j216zmo0xw

Answer 2

You can get the errors from props

errors is an object with the name of each field with an error.

Here is an example