How To Add A Key Prop To A React Fragment

Posted on by Nathaniel Kirk
How to add a key prop to a React Fragment

Suppose you don’t know how to add a key prop to a React Fragment, let’s stay tuned and see how to do it in the following parts of the article. Let’s go into detail now.

How to add a key prop to a React Fragment

Before React version 16, to group multiple elements, we could just use <div>, <span>… However, these tags will occupy a node in the DOM tree, while we only need to group the elements. 

React version 16.0 supports a new render type, fragments, and strings to work around this limitation. It allows us to return an array of elements in a component’s render() method, similar to a regular array, adding a key attribute to each element.

Code:

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

So why do we need to add a key for Fragments? The program will show an error when you create a list of Fragments without giving each corresponding key element.

Use React. Fragment method

This way, we will import React from the react package to use and call React. Fragment. When we map through the elements of the array to be rendered, the key of the React. Fragment will be obtained by the key “id” of the child elements.

Code:

import React from "react";
function App() {
  const items = [
    { id: 1, name: "Jack", age: 25 },
    { id: 2, name: "Tom", age: 20 },
  ];
  return (
    <dl>
      <h2>Add a key prop to a React Fragment | LearnShareIT</h2>
      {items.map((item) => (
        <React.Fragment key={item.id}>
          <hr />
          <h3>Name: {item.name}</h3>
          <h3>Age: {item.age}</h3>
        </React.Fragment>
      ))}
    </dl>
  );
}
 
export default App;

Output:

So, we can render the elements in the array surrounded by React from an array. Fragment and each Fragment has its key. Or you can refer to how to do it below.

Import Fragment from React package

Or we can use the way to import Fragments straight from the React package without going through the React module. In the example below, I will change a bit to use the elements’ index to assign the Fragment’s id.

Code:

import {Fragment} from "react";
function App() {
  const footballers = [
    { name: "Ronaldo", age: 37 },
    { name: "Messi", age:35 },
  ];
  return (
    <dl>
      <h2>Add a key prop to a React Fragment | LearnShareIT</h2>
      {footballers.map((footballer,index) => (
        <Fragment key={index}>
          <hr />
          <h3>Name: {footballer.name}</h3>
          <h3>Age: {footballer.age}</h3>
        </Fragment>
      ))}
    </dl>
  );
}
 
export default App;

Output:

You can see here I have assigned the Fragment’s id with the array’s index in the map() function. Hope these methods will be helpful to you

Summary

To summarize, some answers for how to add a key prop to a React Fragment are introduced in this article, like using React. Fragment method or importing Fragment from React package. Have a good day!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *