Formik: Is there a way to deliver additional props with the render/component props?

[kwhitaker]

Our org is looking at Formik to replace redux-form. Some of our forms are fairly complex, and rely on some redux store states to enable/disable or display/hide certain elements within a form. Is there a way (or what is the "official" pattern) to accomplish this in Formik - that is to pass these additional objects down into the Formik component?

Thanks.

[jaredpalmer]

Where did this logic live before? Within the redux-form hoc?

[jaredpalmer]

I know that lots of ppl from Redux-land love the HoC approach. However, the component is actually more powerful because you have full access to React state, props, and lifecycle methods directly. It's just plain React!

<Formik
    initialValues={...}
    validate={...}
    onSubmit={ ... }
    render={formikProps => 
       <Component  {...formikProps} {...whatever you need} {props come from anywhere} /> 
    } 
/>

If you are using the withFormik() HoC with Redux...

export default connect({...})(withFormik({ .. })(Comp))

// or with recompose 

export default compose (
   connect({ ... })
   withFormik({ ... })
)(Component)

FYI, withFormik() is calls<Formik render /> under the hood, so the HoC is a lot ceremony for something that you can do with just a component 😎.

[kwhitaker]

Nice! The first code block i what I was looking for. Thanks so much :D

[mdekrey]

Thanks for responding so quickly, @jaredpalmer!

[sarimj-cc]

Can't you guys write a good easy code for demonstrating something as an example because there are many users who are beginners..

[KeweiCodes]

As a beginner to Formik, I took to HoC approach purely because it was the number one approach listed on home docs. Perhaps we can swap that around and make using render number one? :)

[marth00165]

where do i import compose from?

[johnrom]

@marth00165 if you're looking for recompose documentation, I'd check out https://github.com/acdlite/recompose

Note that recompose is actually deprecated so I wouldn't recommend integrating it into a new project.

[mdekrey]

@marth00165, we were using https://ramdajs.com/docs/#compose.

[nilamsavani91]

I am passing prop from one component to its child component and in my child component I want to use withFormik() hook. How can I get the values sent by my parent component in child component?

[nesibeyyubov]

I am passing prop from one component to its child component and in my child component I want to use withFormik() hook. How can I get the values sent by my parent component in child component?

You can get it in handleSubmit function (inside withFormik object) as a parametr (in formikBag provides this for you)

[Cuantico]

I am passing prop from one component to its child component and in my child component I want to use withFormik() hook. How can I get the values sent by my parent component in child component?

const MyComponent = props => {
    function handleSubmit(values, { setSubmitting }) {
        // handle
    }

    return (
        <CreateForm handleSubmit={ handleSubmit }/>
    )
}

const CreateForm = props => {
    const { handleSubmit } = props;

    const MyFormWithFormik = withFormik({
        // ...,
        handleSubmit: handleSubmit,
    })(MyForm);

    return <MyFormWithFormik/>
}