From 46a33b2fbde41f7fa06a25f4d19f6c3da994ea7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Luis=20Rojas=20Le=C3=B3n?= <rojasleon.dev@gmail.com>
Date: Fri, 25 Sep 2020 03:54:16 -0500
Subject: [PATCH] docs(React): jsx wrapped in enclosing tags
 (@headlessui-react/readme.md) (#10)

---
 packages/@headlessui-react/README.md | 126 +++++++++++++++------------
 1 file changed, 68 insertions(+), 58 deletions(-)

diff --git a/packages/@headlessui-react/README.md b/packages/@headlessui-react/README.md
index 165b2ae..9ce815f 100644
--- a/packages/@headlessui-react/README.md
+++ b/packages/@headlessui-react/README.md
@@ -75,20 +75,22 @@ function MyComponent() {
   const [isOpen, setIsOpen] = useState(false)
 
   return (
-    <button onClick={() => setIsOpen(!isOpen)}>
-      Toggle
-    </button>
-    <Transition
-      show={isOpen}
-      enter="transition-opacity duration-75"
-      enterFrom="opacity-0"
-      enterTo="opacity-100"
-      leave="transition-opacity duration-150"
-      leaveFrom="opacity-100"
-      leaveTo="opacity-0"
-    >
-      I will fade in and out
-    </Transition>
+    <>
+      <button onClick={() => setIsOpen(!isOpen)}>
+        Toggle
+      </button>
+      <Transition
+        show={isOpen}
+        enter="transition-opacity duration-75"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="transition-opacity duration-150"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        I will fade in and out
+      </Transition>
+    </>
   )
 }
 ```
@@ -105,15 +107,17 @@ function MyComponent() {
   const [isOpen, setIsOpen] = useState(false)
 
   return (
-    <button onClick={() => setIsOpen(!isOpen)}>
-      Toggle
-    </button>
-    <Transition
-      show={isOpen}
-      // ...
-    >
-      I will fade in and out
-    </Transition>
+    <>
+      <button onClick={() => setIsOpen(!isOpen)}>
+        Toggle
+      </button>
+      <Transition
+        show={isOpen}
+        // ...
+      >
+        I will fade in and out
+      </Transition>
+    </>
   )
 }
 ```
@@ -128,18 +132,20 @@ function MyComponent() {
   const [isOpen, setIsOpen] = useState(false)
 
   return (
-    <button onClick={() => setIsOpen(!isOpen)}>
-      Toggle
-    </button>
-    <Transition
-      show={isOpen}
-      as="a"
-      href="/my-url"
-      className="font-bold"
-      // ...
-    >
-      I will fade in and out
-    </Transition>
+    <>
+      <button onClick={() => setIsOpen(!isOpen)}>
+        Toggle
+      </button>
+      <Transition
+        show={isOpen}
+        as="a"
+        href="/my-url"
+        className="font-bold"
+        // ...
+      >
+        I will fade in and out
+      </Transition>
+    </>
   )
 }
 ```
@@ -154,15 +160,17 @@ function MyComponent() {
   const [isOpen, setIsOpen] = useState(false)
 
   return (
-    <button onClick={() => setIsOpen(!isOpen)}>
-      Toggle
-    </button>
-    <Transition
-      show={isOpen}
-      // ...
-    >
-      {ref => <div ref={ref}>{/* Your content goes here*/}</div>}
-    </Transition>
+    <>
+      <button onClick={() => setIsOpen(!isOpen)}>
+        Toggle
+      </button>
+      <Transition
+        show={isOpen}
+        // ...
+      >
+        {(ref) => <div ref={ref}>{/* Your content goes here*/}</div>}
+      </Transition>
+    </>
   )
 }
 ```
@@ -192,20 +200,22 @@ function MyComponent() {
   const [isOpen, setIsOpen] = useState(false)
 
   return (
-    <button onClick={() => setIsOpen(!isOpen)}>
-      Toggle
-    </button>
-    <Transition
-      show={isOpen}
-      enter="transition-opacity duration-75"
-      enterFrom="opacity-0"
-      enterTo="opacity-100"
-      leave="transition-opacity duration-150"
-      leaveFrom="opacity-100"
-      leaveTo="opacity-0"
-    >
-      I will fade in and out
-    </Transition>
+    <>
+      <button onClick={() => setIsOpen(!isOpen)}>
+        Toggle
+      </button>
+      <Transition
+        show={isOpen}
+        enter="transition-opacity duration-75"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="transition-opacity duration-150"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        I will fade in and out
+      </Transition>
+    </>
   )
 }
 ```