@ -95,6 +95,8 @@ Usually you won't need this unless you need to [pass a `key` to your `Fragment`.
</DeepDive>
---
### Assigning multiple elements to a variable {/*assigning-multiple-elements-to-a-variable*/}
Like any other element, you can assign Fragment elements to variables, pass them as props, and so on:
@ -115,6 +117,8 @@ function CloseDialog() {
}
```
---
### Grouping elements with text {/*grouping-elements-with-text*/}
You can use `Fragment` to group text together with components:
@ -132,6 +136,8 @@ function DateRangePicker({ start, end }) {
}
```
---
### Rendering a list of Fragments {/*rendering-a-list-of-fragments*/}
Here's a situation where you need to write `Fragment` explicitly instead of using the `<></>` syntax. When you [render multiple elements in a loop](/learn/rendering-lists), you need to assign a `key` to each element. If the elements within the loop are Fragments, you need to use the normal JSX element syntax in order to provide the `key` attribute: