Formik: Access FieldArray imperatively

[casperOne]

Is there a way to get the API object exposed by the render method of the FieldArray component imperatively?

I have an adapter on top of Formik which exposes array helpers as well, so I don't want to rely on provider specific components as a prerequisite.

[jaredpalmer]

If I understand correctly, you want FieldArray to pass down its updateArrayField method which takes a function, runs it, and then orchestrates the validation?

So you want to be able to do something like this:

  push = (value: any) =>
    fieldArrayProps.updateArrayField(
      (array: any[]) => [...(array || []), value], // this is what you want to do????
      false, // dont alter touched
      false  // dont alter errors
    );

[casperOne]

@jaredpalmer Thanks for the response, apologies though, I don't think I explained what I am looking for correctly.

Currently, I want to access the arrayHelpers exposed by the render prop of the FieldArray imperatively..

So instead of doing this:

<FieldArray name='arrayProperty' render={ arrayHelpers => { // arrayHelpers is a set of helpers on the array exposed by // 'arrayProperty' in the data model. } } />

Instead, I'd like to call some sort of function (maybe something off the render property exposed by the Formik component, or a global function) which will give me the helper exposed above in arrayHelper.

For example:

````
...
render={
formApi => {
// Render stuff.
...

        // Get array helper from global function...
        const arrayPropertyHelper = getArrayHelper('arrayProperty')

        // or something hanging off formApi
        const arrayPropertyHelper = formApi.getArrayHelper('arrayProperty')

        // Call methods on arrayPropertyHelper
        arrayPropertyHelper.insert(0, 'hello')
        arrayPropertyHelper.remove(0)
    }
}

/>
``` Ultimately, I have an adapter overformApiabove which is exposed by a context (to prevent excessive prop drilling); the adapter interface has array operations as well. I'd like to prevent provider-specific constructs (in this case, theFieldArray` component) from being used.

[jaredpalmer]

Yeah FieldArray is kind of useless I guess. We could curry like you described. Hrmmm.

[jaredpalmer]

Need to think about this one for a bit. I like this a lot.

[casperOne]

@jaredpalmer A curried option would work, but if it's simpler to expose the object returned in the render property of the FieldArray component, that would certainly be a solid base, IMO.

[stale[bot]]

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

[stale[bot]]

ProBot automatically closed this due to inactivity. Holler if this is a mistake, and we'll re-open it.

[olivergrimes]

Hello, was anything done to make the following example possible? Or is it safe to simply expand the scope of FieldArray to expose arrayHelpers to the desired components - even if it eats up existing non-array fields?

Desired functionality taken from @casperOne 's example:

<Formik
    ...
    render={
        formApi => {
            // Render stuff.
            ...

            // Get array helper from global function...
            const arrayPropertyHelper = getArrayHelper('arrayProperty')

            // or something hanging off formApi
            const arrayPropertyHelper = formApi.getArrayHelper('arrayProperty')

            // Call methods on arrayPropertyHelper
            arrayPropertyHelper.insert(0, 'hello')
            arrayPropertyHelper.remove(0)
        }
    }
/>

[olivergrimes]

Just coming back to this and expanding the scope isn't suitable for my use case - it would be great if we could access arrayHelpers from FormikState. Could this issue be re-opened?

I'm fudging this for now using the following:

let newCollection = this.props.values.myCollection
    .concat([{
        ...newItem
    }]);

this.props.setFieldValue("myCollection", newCollection );
this.props.setFieldTouched("myCollection", true);