From 00fb21ce90d79167a82bac365aae02845edc583a Mon Sep 17 00:00:00 2001
From: Andrew Clark <acdlite@fb.com>
Date: Tue, 28 Nov 2017 13:24:02 -0800
Subject: [PATCH] Update examples

---
 ...17-11-28-react-v16.2.0-fragment-support.md | 40 ++++++++++---------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md
index a07405192..92398283b 100644
--- a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md
+++ b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md
@@ -37,10 +37,11 @@ render() {
   return (
     // Extraneous span element :(
     <span>
-      Text with
-      <a href="/foo">multiple</a>
-      <a href="/bar">links</a>
-      inside it.
+      Text children
+      <button>interleaved</button>
+      with
+      <button>other</button>
+      children.
     </span>
   );
 }
@@ -51,10 +52,11 @@ To address this limitation, React 16.0 added support for [returning an array of
 ```jsx
 render() {
  return [
-    "Text with",
-    <a key="link1" href="/foo">multiple</a>,
-    <a key="link2" href="/bar">links</a>,
-    "inside it."
+    "Text children",
+    <button key="button1">interleaved</button>,
+    "with",
+    <button key="button2">other</button>,    
+    "children."
  ];
 }
 ```
@@ -67,14 +69,15 @@ However, this has some confusing differences from normal JSX:
 
 To provide a more consistent authoring experience for fragments, React now provides a first-class `Fragment` component that can be used in place of arrays.
 
-```jsx{3,8}
+```jsx{3,9}
 render() {
   return (
     <Fragment>
-      Text with
-      <a href="/foo">multiple</a>
-      <a href="/bar">links</a>
-      inside it.
+      Text children
+      <button>interleaved</button>
+      with
+      <button>other</button>
+      children.
     </Fragment>
   );
 }
@@ -105,14 +108,15 @@ const Fragment = React.Fragment;
 
 Fragments are a common pattern in our codebases at Facebook. We anticipate they'll be widely adopted by other teams, too. To make the authoring experience as convenient as possible, we're adding syntactical support for fragments to JSX:
 
-```jsx{3,8}
+```jsx{3,9}
 render() {
   return (
     <>
-      Text with
-      <a href="/foo">multiple</a>
-      <a href="/bar">links</a>
-      inside it.
+      Text children
+      <button>interleaved</button>
+      with
+      <button>other</button>
+      children.
     </>
   );
 }