Browse Source

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
main
Ernesto García 7 years ago
committed by Dan Abramov
parent
commit
9b20285d1d
  1. 20
      content/docs/reference-react-component.md

20
content/docs/reference-react-component.md

@ -122,9 +122,9 @@ You can also return multiple items from `render()` using an array:
```javascript
render() {
return [
   <li key="A">First item</li>,
   <li key="B">Second item</li>,
   <li key="C">Third item</li>,
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
];
}
```
@ -133,6 +133,20 @@ render() {
>
> Don't forget to [add keys](/docs/lists-and-keys.html#keys) to elements in a fragment to avoid the key warning.
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:
```javascript
render() {
return (
<React.Fragment>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</React.Fragment>
);
}
```
* * *
### `constructor()`

Loading…
Cancel
Save