Browse Source

Fix formatting

main
Dan Abramov 2 years ago
parent
commit
348d1407ce
  1. 8
      beta/src/content/apis/react/Fragment.md

8
beta/src/content/apis/react/Fragment.md

@ -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:
@ -183,6 +189,8 @@ function PostBody({ body }) {
</Sandpack>
---
## Reference {/*reference*/}
### `Fragment` {/*fragment*/}

Loading…
Cancel
Save