Formik: Is it possible to access FieldArray arrayHelpers outside FieldArray render method?

[Okami92]

Is it possible to access FieldArray arrayHelpers outside FieldArray render method?

I have a dynamic list of form fields, which can be added and deleted. I implemented it with FieldArray, works as expected, but the button for adding new fields must be outside of render method of this particular FieldArray.

is there a possibility to programmatically get access to the methods of this FieldArray by name for example from outside of FieldArray render method?

I read through documentation, but seems like there is no such use case described. Thank you in advance.

[yourfavorite]

@Okami92 I see you closed the issue. I'm having a similar issue. Did you find a solution for this?

[felixcatto]

Also want to know this :'(

[Okami92]

Hey. In my case, I just rendered FieldArray inside another FieldArray. Here is example: https://codesandbox.io/s/4z5nkq3ol9

Hope it helps.

[charlax]

@Okami92 not sure to understand... You are indeed inside the FieldArray render method, and you are using the arrayHelpers object.

I'm looking at a similar issue. I presume this is not really possible with formik.

cc @jaredpalmer what would you recommend here?

[mjbertenburg]

I am facing this issue as well at the moment. I have got a table with input fields in the rows and I would like to push new items from an api request, but allowing to dismiss them via arrayHelpers remove() etc.
Is there any news on the problem?

[yh54321]

I faced a similar issue when I wanted a button outside of my FieldArray to add a field to into the FieldArray.
Resolved in the following way:
onClick={() => {values.MYFIELDARRAY.push({MYFIELDNAME: ""}); setValues(values)}}

Perhaps there are many good reasons not to resolve in this way, but I don't know about them, so I'll pretend they don't exist.

[j0b0sapi3n]

Was this ever solved? I'm trying to use arrayHelpers.insert outside of FieldArray render method but not exactly sure how to

[Eldoza]

@yh54321 approach worked for me. I was able to gain access to the Field Array helpers. There did not appear to be any performance issues with this approach.

[brendengifford]

I was able to do this by using a binding method inside the FieldArray render.

Something like this:

function demo() {
  let boundArrayHelpers;

  const bindArrayHelpers = (arrayHelpers) => {
    boundArrayHelpers = arrayHelpers
  }

  return (
    <Form>
      <FieldArray
        name="friends"
        render={arrayHelpers => {
          bindArrayHelpers(arrayHelpers);
          return (
            <div>
              {values.friends.map((friend, index) => (
                <div key={index}>
                  <Field name={`friends[${index}].name`} />
                  <Field name={`friends.${index}.age`} />
                  <button type="button" onClick={() => arrayHelpers.remove(index)}>
                    -
                  </button>
                </div>
              ))}
            </div>
          )}
        }
      />

      <button
        type="button"
        onClick={() => boundArrayHelpers.push({ name: '', age: '' })}
      >
        +
      </button>
    </Form>
  )
}

[boshng95]

I had tested the suggested solution given by @yh54321 & @brendengifford . I do appreciate the solution but it triggers the error of _"Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop."_ . Just wonder, is there any better solution for this? Or what I had missed out?

[wondering639]

I had tested the suggested solution given by @yh54321 & @brendengifford . I do appreciate the solution but it triggers the error of _"Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop."_ . Just wonder, is there any better solution for this? Or what I had missed out?

Solution from @brendengifford works fine for me. @boshng95 could you fix your issue? guess your rootcause was somewhere else? are you using the react key atteribute for preventing unnecessary re-renders?