Formik arrayHelpers remove is not removing the selected item - reactjs

Question

I am using Formik's arrayHelpers to push and remove objects from an array of objects. The push works as expected and adds the object and its values to the array. The remove works when you only select one item in the array and then deselect it. The problem, however starts when you select multiple items. For instance, you select the first item and it is added to the array and then select the second item and it is added to the array, but say you want to deselect that second item and you click on it, the first item is deselected. Then if you click on it again, it deselects the second item.
initialValue: lenders: []
/*mock array of lenders*/
const lenders = [
{
id: 1,
text: 'Lender1',
value: 'Lender1',
},
{
id: 2,
text: 'Lender2',
value: 'Lender2',
},
{
id: 3,
text: 'Lender3',
value: 'Lender3',
},
]
<FieldArray
name="lenders"
render={arrayHelpers => (
<div className="lenders">
{lenders.map(lender => (
<div key={lender.id}>
<Field name={`lender${lender.id}`}>
{({ field, meta }) => (
<SelectableCard
id={field.name}
name={field.name}
text={lender.value}
isSelected={props.values.lenders.some(
len => len.id === lender.id
)}
label={lender.value}
inputName={field.name}
value={lender.value}
ref={field.ref}
onClick={evt => {
let isSelected = props.values.lenders.some(
len => len.id === lender.id
);
isSelected
? arrayHelpers.remove(lender)
: arrayHelpers.push({
id: lender.id,
value: lender.value,
});
field.onChange({
target: {
id: lender.id,
value: !isSelected,
},
});
}}
/>
)}
</Field>
</div>
))}
</div>
)}

Answer 1

This was solved by changing the isSelected const in the onClick to finding the index like this:
const index = props.values.lenders.findIndex(
len => len.id === lender.id
);
Then wrapping the arrayHelpers to check if the index is greater than -1:
index > -1
? arrayHelpers.remove(index)
: arrayHelpers.push({
id: lender.id,
value: lender.value,
});

Answer 2

FieldArray's arrayHelpers render props takes an index of the item to be removed and not the object to be removed
Pass on the index that you obtain from map
<FieldArray
name="lenders"
render={arrayHelpers => (
<div className="lenders">
{lenders.map((lender, index) => (
<div key={lender.id}>
<Field name={`lender${lender.id}`}>
{({ field, meta }) => (
<SelectableCard
id={field.name}
name={field.name}
text={lender.value}
isSelected={props.values.lenders.some(
len => len.id === lender.id
)}
label={lender.value}
inputName={field.name}
value={lender.value}
ref={field.ref}
onClick={evt => {
let isSelected = props.values.lenders.some(
len => len.id === lender.id
);
isSelected
? arrayHelpers.remove(index)
: arrayHelpers.push({
id: lender.id,
value: lender.value,
});
field.onChange({
target: {
id: lender.id,
value: !isSelected,
},
});
}}
/>
)}
</Field>
</div>
))}
</div>
)}

Answer 3

As mentioned above you should remove the index of the item/object not the object itself.
I encountered this while integrating Formik with ChipInput and solved as follows:
<FieldArray
name="topics"
render={arrayHelpers => (
<Field
name="topics"
component={ChipInput}
type="text"
label="Topics"
value={values.topics}
margin="none"
onAdd={chip => arrayHelpers.push(chip)}
onDelete={chip =>
arrayHelpers.remove(values.topics.indexOf(chip))
}
fullWidth
chipRenderer={chipRenderer}
helperText={errors.topics ? errors.topics : ''}
error={errors.topics ? true : false}
/>