Unexpected "Each child in a list should have a unique key prop" warning

[psaikali]

Hey folks,

Thanks for the library!

I'm getting a weird Warning: Each child in a list should have a unique "key" prop. error in my console when creating a simple D'n'D list, but the <Draggable /> components do have a key prop. Any idea why this could happen?

Versions:

"react": "^17.0.1",
"react-beautiful-dnd": "^13.0.0",

Code:

<DragDropContext onDragEnd={onDragEnd}>
    <Droppable droppableId="playersList">
        {(provided, snapshot) => (
        <div {...provided.droppableProps} ref={provided.innerRef}>
            {players.map((p, i) => {
            const player = getPlayer(p.id);

            return (
                <Draggable
                draggableId={`player${year}${player.id}${i}`}
                index={i}
                key={`player${year}${player.id}${i}`}
                >
                {(provided, snapshot) => (
                    ...
                )}
                </Draggable>
            );
            })}
            {provided.placeholder}
        </div>
        )}
    </Droppable>
</DragDropContext>

[kpinkerman]

Getting the same warning. Confirmed that all my keys are unique.

[richjava]

I'm also getting the same message with unique keys.

    "react": "^16.8.2",
    "react-beautiful-dnd": "^13.0.0",

[zacharymostowsky]

Same here.

    "react": "^17.0.1",
    "react-beautiful-dnd": "^13.1.0",

[ilgtomaz]

Hey, I had the same problem with Droppable, my problem was that the placeholder had not the key value. So I cloned the element and insert the key (I used 0 for example) and the problem was solved.

I hope it can help you

[ThanhTanNguyen2007]

Im getting a same error, my list already have unique keys, but get this error

[BrunoOsio]

The problem says that 'child in a list should have a unique "key"', so, I confirmed it when I commented my map code, where each element of the map was a Draggable element.

So I discovered that I was left an react fragment in the return statement "<> </>". I deleted the fragment and now the key is being referred to a Draggable element.

[sierraleonez]

Same error here

 "react": "18.2.0",
 "react-beautiful-dnd": "^13.1.1",

disabling strict mode doesn't help, neither assigning keys to all mapped items.

[eliasthompson]

Still getting this as of Aug '23, any plans to address this?

[mann-david]

For me, the solution was removing every Fragment (<></>) like @BrunoOsio mentioned. I could then just have a key prop on my Draggable and my Droppable tags. I did have to make sure that they were unique as the were called multiple times to render lists and draggable items.

[soetji]

The issue, as stated above, is that provided.placeholder has no key.

So the following works for me. I created a function component: const Placeholder = ({children}) => children;

instead of {provided.placeholder} I wrote: <Placeholder key='__dnd_placeholder'>{provided.placeholder}</Placeholder>

You can use whatever unique key you want instead of __dnd_placeholder.

[wojciech-lasota]

The issue, as stated above, is that provided.placeholder has no key.

So this works for me. I created the function: const Placeholder = ({children}) => children;

instead of {provided.placeholder} I used: <Placeholder key='__dnd_placeholder'>{provided.placeholder}</Placeholder>

You can use whatever unique key you want instead of __dnd_placeholder.

Thanks 👍