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.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.