Get touched and errors props into Wizard.Page from Formik Multistep example

📖 Documentation

I think the Multistep example is one of most used use cases for Formik and quite elegant. Before I rewrite the whole thing, probably somebody can help: I wrapping my head around how to get the touched and errors props from Formik into the Wizard page. I don’t want to use the ErrorMessage Component because one of my own components within Wizard.Page relies on touched and errors from <Formik />.

What I tried: Adding touched and errors as args in Formik render prop in line 62: https://github.com/jaredpalmer/formik/blob/344b846bc25865dc02b6304e7c9f447b5b1552fd/examples/MultistepWizard.js#L62 but I don’t know how to access it within Wizard.Page, e.g. like this:

<Wizard.Page>
  {props => (
    <MyCustomField errors={props.error} touched={props.touched} />
  ...

[johnrom]

Yep, that’s the same as using useFormikContext, except Field does it for you. You can also use (for thoroughness’ sake):

const MyCustomField = props => {
    const [field, meta] = useField(props.name);

    return <input name={field.name} className={meta.error ? "input-error" : ""} />;
}

[johnrom]

Np, I’m closing this in favor of #1725