` syntax:](/reference/react/Fragment#rendering-a-list-of-fragments)
+
+```js
+import { Fragment } from "react";
+
+// ...
+
+const listItems = people.map((person) => (
+
+ {person.name}
+ {person.bio}
+
+));
+```
+
+Fragments disappear from the DOM, so this will produce a flat list of ``, `
`, `
`, `
`, and so on.
+
+
+
+### Where to get your `key`
+
+Different sources of data provide different sources of keys:
+
+- **Data from a database:** If your data is coming from a database, you can use the database keys/IDs, which are unique by nature.
+- **Locally generated data:** If your data is generated and persisted locally (e.g. notes in a note-taking app), use an incrementing counter, [`crypto.randomUUID()`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID) or a package like [`uuid`](https://www.npmjs.com/package/uuid) when creating items.
+
+### Rules of keys
+
+- **Keys must be unique among siblings.** However, itâs okay to use the same keys for JSX nodes in _different_ arrays.
+- **Keys must not change** or that defeats their purpose! Don't generate them while rendering.
+
+### Why does React need keys?
+
+Imagine that files on your desktop didn't have names. Instead, you'd refer to them by their order -- the first file, the second file, and so on. You could get used to it, but once you delete a file, it would get confusing. The second file would become the first file, the third file would be the second file, and so on.
+
+File names in a folder and JSX keys in an array serve a similar purpose. They let us uniquely identify an item between its siblings. A well-chosen key provides more information than the position within the array. Even if the _position_ changes due to reordering, the `key` lets React identify the item throughout its lifetime.
+
+
+
+You might be tempted to use an item's index in the array as its key. In fact, that's what React will use if you don't specify a `key` at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs.
+
+Similarly, do not generate keys on the fly, e.g. with `key={Math.random()}`. This will cause keys to never match up between renders, leading to all your components and DOM being recreated every time. Not only is this slow, but it will also lose any user input inside the list items. Instead, use a stable ID based on the data.
+
+Note that your components won't receive `key` as a prop. It's only used as a hint by React itself. If your component needs an ID, you have to pass it as a separate prop: ``.
+
+
+
+
+
+On this page you learned:
+
+- How to move data out of components and into data structures like arrays and objects.
+- How to generate sets of similar components with JavaScript's `map()`.
+- How to create arrays of filtered items with JavaScript's `filter()`.
+- Why and how to set `key` on each component in a collection so React can keep track of each of them even if their position or data changes.
+
+
+
+
+
+#### Splitting a list in two
+
+This example shows a list of all people.
+
+Change it to show two separate lists one after another: **Chemists** and **Everyone Else.** Like previously, you can determine whether a person is a chemist by checking if `person.profession === 'chemist'`.
+
+```js
+import { people } from "./data.js";
+import { getImageUrl } from "./utils.js";
+
+export default function List() {
+ const listItems = people.map((person) => (
+
+ })
+
+ {person.name}:
+ {" " + person.profession + " "}
+ known for {person.accomplishment}
+
+
+ ));
+ return (
+
+ Scientists
+
+
+ );
+}
+```
+
+```js
+export const people = [
+ {
+ id: 0,
+ name: "Creola Katherine Johnson",
+ profession: "mathematician",
+ accomplishment: "spaceflight calculations",
+ imageId: "MK3eW3A",
+ },
+ {
+ id: 1,
+ name: "Mario JosÊ Molina-Pasquel HenrÃquez",
+ profession: "chemist",
+ accomplishment: "discovery of Arctic ozone hole",
+ imageId: "mynHUSa",
+ },
+ {
+ id: 2,
+ name: "Mohammad Abdus Salam",
+ profession: "physicist",
+ accomplishment: "electromagnetism theory",
+ imageId: "bE7W1ji",
+ },
+ {
+ id: 3,
+ name: "Percy Lavon Julian",
+ profession: "chemist",
+ accomplishment:
+ "pioneering cortisone drugs, steroids and birth control pills",
+ imageId: "IOjWm71",
+ },
+ {
+ id: 4,
+ name: "Subrahmanyan Chandrasekhar",
+ profession: "astrophysicist",
+ accomplishment: "white dwarf star mass calculations",
+ imageId: "lrWQx8l",
+ },
+];
+```
+
+```js
+export function getImageUrl(person) {
+ return "https://i.imgur.com/" + person.imageId + "s.jpg";
+}
+```
+
+```css
+ul {
+ list-style-type: none;
+ padding: 0px 10px;
+}
+li {
+ margin-bottom: 10px;
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 20px;
+ align-items: center;
+}
+img {
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+}
+```
+
+
+
+You could use `filter()` twice, creating two separate arrays, and then `map` over both of them:
+
+```js
+import { people } from "./data.js";
+import { getImageUrl } from "./utils.js";
+
+export default function List() {
+ const chemists = people.filter((person) => person.profession === "chemist");
+ const everyoneElse = people.filter(
+ (person) => person.profession !== "chemist"
+ );
+ return (
+
+ Scientists
+ Chemists
+
+ Everyone Else
+
+
+ );
+}
+```
+
+```js
+export const people = [
+ {
+ id: 0,
+ name: "Creola Katherine Johnson",
+ profession: "mathematician",
+ accomplishment: "spaceflight calculations",
+ imageId: "MK3eW3A",
+ },
+ {
+ id: 1,
+ name: "Mario JosÊ Molina-Pasquel HenrÃquez",
+ profession: "chemist",
+ accomplishment: "discovery of Arctic ozone hole",
+ imageId: "mynHUSa",
+ },
+ {
+ id: 2,
+ name: "Mohammad Abdus Salam",
+ profession: "physicist",
+ accomplishment: "electromagnetism theory",
+ imageId: "bE7W1ji",
+ },
+ {
+ id: 3,
+ name: "Percy Lavon Julian",
+ profession: "chemist",
+ accomplishment:
+ "pioneering cortisone drugs, steroids and birth control pills",
+ imageId: "IOjWm71",
+ },
+ {
+ id: 4,
+ name: "Subrahmanyan Chandrasekhar",
+ profession: "astrophysicist",
+ accomplishment: "white dwarf star mass calculations",
+ imageId: "lrWQx8l",
+ },
+];
+```
+
+```js
+export function getImageUrl(person) {
+ return "https://i.imgur.com/" + person.imageId + "s.jpg";
+}
+```
+
+```css
+ul {
+ list-style-type: none;
+ padding: 0px 10px;
+}
+li {
+ margin-bottom: 10px;
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 20px;
+ align-items: center;
+}
+img {
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+}
+```
+
+In this solution, the `map` calls are placed directly inline into the parent `` elements, but you could introduce variables for them if you find that more readable.
+
+There is still a bit duplication between the rendered lists. You can go further and extract the repetitive parts into a `` component:
+
+```js
+import { people } from "./data.js";
+import { getImageUrl } from "./utils.js";
+
+function ListSection({ title, people }) {
+ return (
+ <>
+ {title}
+
+
+ );
+}
+
+export default function List() {
+ const chemists = people.filter((person) => person.profession === "chemist");
+ const everyoneElse = people.filter(
+ (person) => person.profession !== "chemist"
+ );
+ return (
+
+ Scientists
+
+
+
+ );
+}
+```
+
+```js
+export const people = [
+ {
+ id: 0,
+ name: "Creola Katherine Johnson",
+ profession: "mathematician",
+ accomplishment: "spaceflight calculations",
+ imageId: "MK3eW3A",
+ },
+ {
+ id: 1,
+ name: "Mario JosÊ Molina-Pasquel HenrÃquez",
+ profession: "chemist",
+ accomplishment: "discovery of Arctic ozone hole",
+ imageId: "mynHUSa",
+ },
+ {
+ id: 2,
+ name: "Mohammad Abdus Salam",
+ profession: "physicist",
+ accomplishment: "electromagnetism theory",
+ imageId: "bE7W1ji",
+ },
+ {
+ id: 3,
+ name: "Percy Lavon Julian",
+ profession: "chemist",
+ accomplishment:
+ "pioneering cortisone drugs, steroids and birth control pills",
+ imageId: "IOjWm71",
+ },
+ {
+ id: 4,
+ name: "Subrahmanyan Chandrasekhar",
+ profession: "astrophysicist",
+ accomplishment: "white dwarf star mass calculations",
+ imageId: "lrWQx8l",
+ },
+];
+```
+
+```js
+export function getImageUrl(person) {
+ return "https://i.imgur.com/" + person.imageId + "s.jpg";
+}
+```
+
+```css
+ul {
+ list-style-type: none;
+ padding: 0px 10px;
+}
+li {
+ margin-bottom: 10px;
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 20px;
+ align-items: center;
+}
+img {
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+}
+```
+
+A very attentive reader might notice that with two `filter` calls, we check each person's profession twice. Checking a property is very fast, so in this example it's fine. If your logic was more expensive than that, you could replace the `filter` calls with a loop that manually constructs the arrays and checks each person once.
+
+In fact, if `people` never change, you could move this code out of your component. From React's perspective, all that matters is that you give it an array of JSX nodes in the end. It doesn't care how you produce that array:
+
+```js
+import { people } from "./data.js";
+import { getImageUrl } from "./utils.js";
+
+let chemists = [];
+let everyoneElse = [];
+people.forEach((person) => {
+ if (person.profession === "chemist") {
+ chemists.push(person);
+ } else {
+ everyoneElse.push(person);
+ }
+});
+
+function ListSection({ title, people }) {
+ return (
+ <>
+ {title}
+
+
+ );
+}
+
+export default function List() {
+ return (
+
+ Scientists
+
+
+
+ );
+}
+```
+
+```js
+export const people = [
+ {
+ id: 0,
+ name: "Creola Katherine Johnson",
+ profession: "mathematician",
+ accomplishment: "spaceflight calculations",
+ imageId: "MK3eW3A",
+ },
+ {
+ id: 1,
+ name: "Mario JosÊ Molina-Pasquel HenrÃquez",
+ profession: "chemist",
+ accomplishment: "discovery of Arctic ozone hole",
+ imageId: "mynHUSa",
+ },
+ {
+ id: 2,
+ name: "Mohammad Abdus Salam",
+ profession: "physicist",
+ accomplishment: "electromagnetism theory",
+ imageId: "bE7W1ji",
+ },
+ {
+ id: 3,
+ name: "Percy Lavon Julian",
+ profession: "chemist",
+ accomplishment:
+ "pioneering cortisone drugs, steroids and birth control pills",
+ imageId: "IOjWm71",
+ },
+ {
+ id: 4,
+ name: "Subrahmanyan Chandrasekhar",
+ profession: "astrophysicist",
+ accomplishment: "white dwarf star mass calculations",
+ imageId: "lrWQx8l",
+ },
+];
+```
+
+```js
+export function getImageUrl(person) {
+ return "https://i.imgur.com/" + person.imageId + "s.jpg";
+}
+```
+
+```css
+ul {
+ list-style-type: none;
+ padding: 0px 10px;
+}
+li {
+ margin-bottom: 10px;
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 20px;
+ align-items: center;
+}
+img {
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+}
+```
+
+
+
+#### Nested lists in one component
+
+Make a list of recipes from this array! For each recipe in the array, display its name as an `` and list its ingredients in a `
-
-
- 
-
-
- 
-
-
- 
-
-
- 
-
-
ReactPy
+Temporary branch being used to rewrite ReactPy's documentation.
-