Formik key error using FieldArray component

Question

I am using select component in formik to display multiples fields, but there is a key error.

Steps to reproduce:

Try to select some value and click "add" button
Select some value in the next one
Click the "remove" button in the first item and change select value in the remaining item
At this step you can see the new item added (this is unexpected behavior) and errors in the console

nima · Accepted Answer · 2021-11-02 11:05:02Z

1

The problem is with the key property. You pass the id as key property. so every time you remove the item, the new item will give the same key.

You need to pass a unique key to each child (item) in the map function.

As a solution, you can use the uuid package.

Then import it to the component and use it as key property:

import { v4 as uuidv4 } from 'uuid';

// rest of the codes ...

return (
  <div key={uuidv4()}>

// rest of the codes ...

answered Nov 2, 2021 at 10:58

nima

8,99312 gold badges40 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1