Add support to insert multiple items at once when using useFieldArray

[dwiyatci]

Hi! I believe this is related to #2710. Currently I'm developing a "toggle multiple fields" feature in my project wherein I've got to be able to toggle the middle field items (form controls) ON/OFF. Here's some hypothetical snippet:

useEffect(() => {
  if (toggledOff) {
    const middleFieldIndexes = _.range(1, fields.length - 1);

    remove(middleFieldIndexes);
  } else {
    const middleFieldItems = [
      { index: 1, value: { foo: 42 } },
      { index: 2, value: { foo: 43 } },
    ];

    // currently not supported API
    insert(middleFieldItems);
  }
}, [toggledOff]);

While I can comfortably use remove([]) API to remove multiple field item (for toggling off) but I don't have its counterpart insert([]) (for toggling on).

Describe the solution you'd like
Support insert([{ index, value }, { index, value }, ...], { shouldFocus }). 🙂

Thank you 🙇🏻‍♂️

[bluebill1049]

Thanks @dwiyatci 👍 adding to the board.

[dwiyatci]

@bluebill1049 I'm sorry to bother but this seems to become a requirement in my project sooner than I expected. 😣😖😫 While waiting for the up-votes, do you have any idea of a rather clean workaround to realise this with the current lib API? (clearly multiple actions in a loop won't work as mentioned in #2710)

[bluebill1049]

hey @dwiyatci I will look into it.

[bluebill1049]

I don't even know what i have built... can you test this out: https://codesandbox.io/s/react-hook-form-usefieldarray-insert-test-z8fyw?file=/src/index.js

[dwiyatci]

@bluebill1049 Ohh... WOW. So you're sayin' this turns out to have been implemented all along? :D

[AlanKrygowski]

Also, if anyone came here looking for a way to append/prepend multiple sets of fields at once, then the prepend function does accept an array, where you can normally place in objects as can be seen in this fork:
https://codesandbox.io/s/react-hook-form-usefieldarray-insert-test-forked-gqqnf?file=/src/index.js
(click prepend)