Way to get updated values and errors in a child component in formik?

Question

I am making a multi stepper form and i have divided the steps into separate component and am passing it as children between the parent formik component. Like this

<FormikComponent>
   <ChildStepComponent/>
</>

Is there a way to get the values and errors that Formik provides when i change the input values in the child component?

Answer 1

Two approaches here:

1. You can use useFormikContext in any child component of a Formik form, that way you can have access to all the values and errors of any field in the form.

2. Use a better validation object (I prefer to use Yup library for this) for the errors, that targets all your fields within your child components.

I'll recommend the first one, as you also need the values object. Here's an example of it in this CodeSandBox. In there, you can find that the inner objects uses useField to handle individual fields; and the submit button uses useFormikContext to retrieve all the form values, errors and state (among other useful stuff).