Skip to content

Commit 9b20285

Browse files
gnapsegaearon
authored andcommitted
Update fragments example to use JSX syntax (#520)
* Update fragments example to use JSX syntax * Use more standard JSX notation for fragments * Bring back arrays-based example * Remove keys in fragment, not needed for static items * Add note about fragments syntax existing since v16.2
1 parent b48ecc8 commit 9b20285

File tree

1 file changed

+17
-3
lines changed

1 file changed

+17
-3
lines changed

content/docs/reference-react-component.md

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -122,9 +122,9 @@ You can also return multiple items from `render()` using an array:
122122
```javascript
123123
render() {
124124
return [
125-
   <li key="A">First item</li>,
126-
   <li key="B">Second item</li>,
127-
   <li key="C">Third item</li>,
125+
    <li key="A">First item</li>,
126+
    <li key="B">Second item</li>,
127+
    <li key="C">Third item</li>,
128128
];
129129
}
130130
```
@@ -133,6 +133,20 @@ render() {
133133
>
134134
> Don't forget to [add keys](/docs/lists-and-keys.html#keys) to elements in a fragment to avoid the key warning.
135135
136+
Since [React 16.2.0](/blog/2017/11/28/react-v16.2.0-fragment-support.html), the same can also be accomplished using [fragments](/docs/fragments.html), which don't require keys for static items:
137+
138+
```javascript
139+
render() {
140+
return (
141+
<React.Fragment>
142+
    <li>First item</li>
143+
    <li>Second item</li>
144+
    <li>Third item</li>
145+
</React.Fragment>
146+
);
147+
}
148+
```
149+
136150
* * *
137151

138152
### `constructor()`

0 commit comments

Comments
 (0)