Adding a key prop to a Fragment in React

DanielJanuary 30, 2023

A few days ago I’ve had the following situation:

{items.map((e, k) => {
        return (
          <React.Fragment key={k}>
            <h2>{e}</h2>
          </React.Fragment>
        );
})}

Therefore needed to add a key property to the React fragment <>.

With the above syntax, I don’t think it is possible.

But, if we are using the verbose syntax of React.Fragment this can easily be done:

const animals = ['🐈 Cat', '🐶 Dog', '🐮 Cow'];
return (
    <>
      {animals.map((e, k) => {
        return (
          <React.Fragment key={k}>
            <h2>{e}</h2>
          </React.Fragment>
        );
      })}
    </>
  );

Made this codepen for a test.