fields.remove (and non-closure pattern) always removes last element in FieldArray

I am using onClick={() => fields.remove(index)} from the docs, and have also tried the non-closure workaround outlined in issue #1128, and the example provided in release 1.2.1.

In each case, no matter which FieldArray element I click ‘close’ on, it always removes the last element in the FieldArray.

If I add console.log(index) to the onClick method, I see that the appropriate index number is logged to the console, but still the last element in FieldArray is what gets removed. 😕 Indeed, I can call fields.remove(0) and still the last element gets popped.

Usually I’d assume I’ve done something wrong - and that remains a strong possibility - but, I have followed the examples closely and it’s quite straightforward.

TL;DR; fields.remove(index) is behaving like fields.pop().

I am using "redux-form": "6.3.2"

[samuelg0rd0n]

@markau Could you please explain what you mean by “the solution is to use componentWillReceiveProps to refresh the props in the component.”? I don’t understand what component you are talking about, what props to refresh and how.

[markau]

hey @gustavohenke, the root cause of the problem is where the renderField (using terminology from the members/hobbies example) includes a component which uses componentDidMount to set the state.

The complex component (versus the simple <input type="text" {...input} />) from the members example) does not have its props ‘refreshed’ when the fields array changes.

So, definitely not a bug in redux-form, but in implementation of more complex components. I’ll close this again 😆.

For posterity, the solution is to use componentWillReceiveProps to refresh the props in the component.