How to Add a Key Prop to a React Fragment

Can I add a key prop to a React fragment?

To add a key to a fragment you need to use full Fragment syntax:

<React.Fragment key={your key}>
...
</React.Fragment>

See docs here https://reactjs.org/docs/fragments.html#keyed-fragments

Fix unique 'key' prop error while using React fragments

Not for each Element in the child(list), you should add key to root element of the list. Just wrap list element with Fragment add key to it.

const courseCards = courseData.map((course, index) => (
    <React.Fragemnt key={course.title+index}>
      <Grid item xs={12} sm={4}>
        <Link to={course.url} className={classes.link}>
          <Card
            key={course.img}
            style={{
              maxWidth: 345,
              height: "100%",
              paddingBottom: 32,
              borderRadius: 0
            }}
          >
           // Stuff
          </Card>
        </Link>
      </Grid>

      <Popover
        id="mouse-over-popover"
        className={classes.popover}
        classes={{
          paper: classes.paper
        }}
        open={open}
        anchorEl={anchorEl}
        anchorOrigin={{
          vertical: "center",
          horizontal: "center"
        }}
        transformOrigin={{
          vertical: "center",
          horizontal: "right"
        }}
        onClose={handlePopoverClose}
        disableRestoreFocus
      >
        {/* POPOVER CARDS */}
        <CoursePopoverCards title={course.title} />
      </Popover>
    </React.Fragment>
  ));

In React how to add key prop to element passed as Object

The only way to do it if your component is already instantiated is to clone your component and add the key property

Warning: Each child in a list should have a unique key prop. with input - react

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>

I am getting a unique key prop warning when i have a unique key

As others have said you need to set the key on the top element, in your case being Fragment. But I would change the key value. I don't know what kind of data you have in your item.todo but just setting the key to the value of item.todo could be problematic. I will explain.

A key should be unique only among its siblings

The react.org document on lists and keys sums this up perfectly, so I won't explain in another way. It says this below.

Keys used within arrays should be unique among their siblings. However, they don’t need to be globally unique. We can use the same keys when we produce two different arrays:

(Note: it does not need to be meaningful data).

A key should be stable

This means that between renders the key should not change, so don't use Math.random() which some people think would be good to use.

Why is the above important?

In your data, if two items.todo are the same value then it would break the above. Your key would not be unique. Which could cause performance issues from unnecessary re-renders.

I would recommend using a key with the value of the items.todo and the index of the map. This way if you do have the same value for items.todo adding an index would make the key unique. With this in mind I would write your snippet.

render() { 
  const { items } = this.props;

  return ( 
    items.map((item, index) => (
      <React.Fragment key={item.todo + index}>
        <Item item={item} />
      </React.Fragment>
    ))
  );
}

Here is link to the react.org documentation on list and keys and is a link to the react.org documentation regarding fragments. Both provide examples and useful information. They are a good read and I would highly recommend.

Also something I noticed is that you're using React.Fragment but then you declare your class with just Component. Your could do what I'm assuming you've done for Component and destructure the Fragement. Something like below:

import React, { Component, Fragment } from 'react';

So you're snippet is a bit more clean, like below:

items.map((item, index) => (
  <Fragment key={item.todo + index}>
    <Item item={item} />
  <Fragment>
))

---

Related Topics