2

i have this:

{array.map((item) => (
                <>
                    <input
                        key={item.id}
                        type="checkbox"
                    />
                    <h3>{item.value}</h3>
                </>
            ))}

and in the website i see the warning: "Warning: Each child in a list should have a unique "key" prop." but i put the "key" attribute. does anyone know why?

pop
  • 217
  • 1
  • 3
  • 11
  • 1
    The `key={item.id}` would have to be on the `<>` element, not the `` element (if that's even possible; my react is rusty) – Tim Lewis Mar 14 '22 at 19:02

1 Answers1

8

The fragment element (<></>) is the top-level child element here, and it needs a key prop. The short syntax being used doesn't support adding an attribute, but the longer syntax does:

<React.Fragment key={item.id}>
  <input type="checkbox" />
  <h3>{item.value}</h3>
</React.Fragment>
David
  • 208,112
  • 36
  • 198
  • 279