CODEWITHSUNDEEP
reactjsformikyup
Miguel Alberto
Miguel Alberto

Reputation: 13

Pass formik validation errors to parent component

I am creating a component that internally has other 2 components with Formik each one, I did it in that way because each internal component submits separately on blur.

What I want to do is, once Formik validates, the errors should be showed within the parent component.

This is a quick example of the structure:

<ParentComponent>
    <FirstInputField onChange={firstChangeHandler} />
    <Divider />
    <SecondInputField onChange={secondChangeHandler} />
    <ErrorMessages>I WANT ERRORS TO BE HERE</ErrorMessages>
</ParentComponent>

The first approach was to send an "onError(error)" to the child component and call it to update the state on the parent component with the errors but I am getting a warning.

Cannot update a component (parent) while rendering a different component (child)

So I'd like to see if there is another way to do this.

Upvotes: 1

Views: 1019

Answers (1)

Preetham
Preetham

Reputation: 87

Context Api to manage the error state would solve your issue.

Reference for similar implementation you can check this post.

Upvotes: 1

Related Questions