Formik key error using FieldArray component

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

My code snippet: https://codesandbox.io/s/loving-shirley-r0jlh?file=/src/income-info.jsx

Steps to reproduce:

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

Answer

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 ...

Edit add unique key for each child