Formik: Pass props through FieldArray

[kserjey]

Feature

I have a view component for rendering an array of fields.

function createFormikArray({ title, initialValue }, renderItem) {
  return function FormikArray({ name, form, ...arrayHepers }) {
    return (
      <React.Fragment>
        {/* view that uses title, initialValue and renderItem props */}
      </React.Fragment>
  }
}

It would be very useful if I could do smth like that:

<FieldArray
  name='users'
  component={FormikArray} 
  title='My Field' 
  initialValue={{ firstname: '', lastname: '' }}
  {/* and so on */}
/>

[kserjey]

Hey, anybody there?

[jaredpalmer]

You can use a closure with render (just like React Router)

[jaredpalmer]

Passing through props gets messy. The only reason Formik does this with Field is beacause Field is the only component which _can_ take care of rendering for you. Every other component is just logic. Hope that gives some context.

[charlax]

The nice thing about using component vs. render is that form is passed as well... If you use render then you have to pass it manually (logical).

Why is it messy? react-router, material-ui and others do this. Just asking out of curiosity. I know it adds a bit more magic to what props are passed, but then nested render get pretty quickly painful to read too...

[plxel]

Also Field component passes props to underlying field Component

<Field
    component="textarea"
    name={`somename.${index}`}
    className="style"
    placeholder="placeholder"
/>

So I thought this will be ok for using the same logic for FieldArray, but it is not... it is really confusing

[cdpautsch]

Any update on this? This is a feature that would be useful. We are passing a custom component to FieldArray, and passing props via FieldArray to our custom component allows us to adjust what renders. I see there's an outstanding PR for it, but it hasn't been updated since March.