Question

Views

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

about 4 years ago · Juan Pablo Isaza

Answer question

Accepted Answer · 2022-07-10T18:49:36.323Z

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