From 9b20285d1d01054ed8cdd1dde12496ec2e0061ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ernesto=20Garc=C3=ADa?= <gnapse@gmail.com>
Date: Sat, 13 Jan 2018 21:51:35 -0300
Subject: [PATCH] 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
---
 content/docs/reference-react-component.md | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md
index fb268a88..e33e2c9a 100644
--- a/content/docs/reference-react-component.md
+++ b/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()`