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:
- Setting a background image with inline styles in react
- Conditionally setting Styles in React
- Create a Numbers only Input field in React.js

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.
Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs