Each child in a list should have a unique "key" prop -- but they already do (two children per iteration)

Question

This question is unlike similar ones because as far as I can tell, all other questions of this nature really do not have unique keys for all children being map'd.

Here is my code...

First, for good measure, I have this check, so there can be no doubt that each key is unique:

    const nbItems = items.length
    const nbUniqueUuids = new Set(items.map((item) => item.uuid)).size
    if (nbItems !== nbUniqueUuids) {
        throw new Error("Non-unique UUIDs detected")
    }

Then, I do this in the return statement of the component:

{items.map((item, index) => {
                return (
                    <>
                        {index !== 0 && (
                            <Xarrow
                                key={`${item.uuid}-arrow`}
                                start={item.uuid}
                                end={items[index - 1].uuid}
                            />
                        )}
                        <Item
                            key={item.uuid}
                            action={item}
                        />
                    </>
                )
            })}

As you can see, two elements are rendered: An Xarrow and an Item. However, each has its own key: one with a -arrow suffix, and one without. The uuid property is confirmed unique, or the if-statement would have triggered and thrown an error.

Why does React think there's a non-unique child here, when clearly, each child has a unique key?

The exact error message is: Warning: Each child in a list should have a unique "key" prop. Check the render method of MyExampleComponent. "MyExampleComponent" here is confirmed to be this one. Neither Xarrow nor Item render any children.

If I wrap both items in a div and give it the key, it works, but I don't want to do that.

I will also note that this works as it should, but I still get the error in the console.

Answer 1

Turns out I have to give the key to the fragment (<></>), and in order to do that, I have to use the full fragment syntax: <React.Fragment key={item.uuid}>...</React.Fragment>