Use <> instead of <react.Fragment>

react-ui-org · Jul 26, 2023 · d5c033e · d5c033e
1 parent c7723ec
commit d5c033e
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 52 deletions.
diff --git a/src/components/CheckboxField/README.md b/src/components/CheckboxField/README.md
@@ -126,7 +126,7 @@ have.
 React.createElement(() => {
   const [agree, setAgree] = React.useState(true);
   return (
-    <React.Fragment>
+    <>
       <CheckboxField
         checked={agree}
         label="I have read and agree with terms and conditions"
@@ -148,7 +148,7 @@ React.createElement(() => {
         validationState="invalid"
         validationText="You must agree to be able to proceed."
       />
-    </React.Fragment>
+    </>
   );
 });
 ```

diff --git a/src/components/FormLayout/README.md b/src/components/FormLayout/README.md
@@ -337,20 +337,20 @@ React.createElement(() => {
         </ToolbarItem>
       </Toolbar>
       <FormLayout fieldLayout={fieldLayout} labelWidth="auto">
-        <React.Fragment>
+        <>
           <TextField
             label="First Name"
           />
           <TextField
             label="Last Name"
           />
-        </React.Fragment>
+        </>
         <TextField
           helpText="Optional"
           label="Email address"
           type="email"
         />
-        <React.Fragment>
+        <>
           <TextField
             label="Address"
             placeholder="Address line 1"
@@ -375,7 +375,7 @@ React.createElement(() => {
             label="This is my delivery address"
             onChange={() => setIsDeliveryAddress(!isDeliveryAddress)}
           />
-        </React.Fragment>
+        </>
         <SelectField
           label="Your favourite fruit"
           onChange={(e) => setFruit(e.target.value)}

diff --git a/src/components/Modal/README.md b/src/components/Modal/README.md
@@ -26,7 +26,7 @@ React.createElement(() => {
   const modalPrimaryButtonRef = React.useRef();
   const modalCloseButtonRef = React.useRef();
   return (
-    <React.Fragment>
+    <>
       <Button
         label="Launch modal"
         onClick={() => setModalOpen(true)}
@@ -66,7 +66,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </React.Fragment>
+    </>
   );
 });
 ```
@@ -116,7 +116,7 @@ React.createElement(() => {
   const modalPrimaryButtonRef = React.useRef();
   const modalCloseButtonRef = React.useRef();
   return (
-    <React.Fragment>
+    <>
       <Button
         label="Launch blocking modal without title"
         onClick={() => {
@@ -235,7 +235,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </React.Fragment>
+    </>
   );
 });
 ```
@@ -265,7 +265,7 @@ React.createElement(() => {
   const modalPrimaryButtonRef = React.useRef();
   const modalCloseButtonRef = React.useRef();
   return (
-    <React.Fragment>
+    <>
       <Button
         label="Launch with close button"
         onClick={() => {
@@ -356,7 +356,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </React.Fragment>
+    </>
   );
 });
 ```
@@ -510,7 +510,7 @@ React.createElement(() => {
   const modalPrimaryButtonRef = React.useRef();
   const modalCloseButtonRef = React.useRef();
   return (
-    <React.Fragment>
+    <>
       <Button
         label="Launch small modal"
         onClick={() => {
@@ -575,7 +575,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </React.Fragment>
+    </>
   );
 });
 ```
@@ -588,7 +588,7 @@ React.createElement(() => {
   const modalPrimaryButtonRef = React.useRef();
   const modalCloseButtonRef = React.useRef();
   return (
-    <React.Fragment>
+    <>
       <Button
         label="Launch auto-width modal"
         onClick={() => setModalOpen(true)}
@@ -629,7 +629,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </React.Fragment>
+    </>
   );
 });
 ```
@@ -650,7 +650,7 @@ React.createElement(() => {
   const modalPrimaryButtonRef = React.useRef();
   const modalCloseButtonRef = React.useRef();
   return (
-    <React.Fragment>
+    <>
       <Button
         label="Launch auto-with modal with a form"
         onClick={() => setModalOpen(true)}
@@ -692,7 +692,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </React.Fragment>
+    </>
   );
 });
 ```
@@ -708,7 +708,7 @@ React.createElement(() => {
   const modalPrimaryButtonRef = React.useRef();
   const modalCloseButtonRef = React.useRef();
   return (
-    <React.Fragment>
+    <>
       <Button
         label="Launch modal at center"
         onClick={() => {
@@ -759,7 +759,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </React.Fragment>
+    </>
   );
 });
 ```
@@ -884,7 +884,7 @@ React.createElement(() => {
     </ModalContent>
   )
   return (
-    <React.Fragment>
+    <>
       <Button
         label="Launch modal with scrolling body"
         onClick={() => {
@@ -945,7 +945,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </React.Fragment>
+    </>
   );
 });
 ```

diff --git a/src/components/Popover/README.md b/src/components/Popover/README.md
@@ -56,7 +56,7 @@ React.createElement(() => {
   const [align, setAlign] = React.useState('');
   // All inline styles in this example are for demonstration purposes only.
   return (
-    <React.Fragment>
+    <>
       <Toolbar align="baseline">
         <ToolbarItem>
           <span id="alignment-options-label">Alignment:</span>
@@ -112,7 +112,7 @@ React.createElement(() => {
           </Popover>
         </PopoverWrapper>
       </div>
-    </React.Fragment>
+    </>
   );
 });
 ```
@@ -222,7 +222,7 @@ React.createElement(() => {
   // All inline styles in this example EXCEPT Popover `style` are for
   // demonstration purposes only.
   return (
-    <React.Fragment>
+    <>
       <Toolbar>
         <ToolbarItem>
           <SelectField
@@ -279,7 +279,7 @@ React.createElement(() => {
           )}
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 });
 ```

diff --git a/src/components/Radio/README.md b/src/components/Radio/README.md
@@ -201,7 +201,7 @@ have.
       },
     ];
     return (
-      <React.Fragment>
+      <>
         <Radio
           label="Your favourite fruit"
           onChange={(e) => setFruit(e.target.value)}
@@ -229,7 +229,7 @@ have.
           validationText="You must select one kind of fruit."
           value={fruit}
         />
-      </React.Fragment>
+      </>
     );
   })
 ```
@@ -257,7 +257,7 @@ It's possible to disable just some options or the whole set.
       },
     ];
     return (
-      <React.Fragment>
+      <>
         <Radio
           label="Your favourite fruit"
           onChange={(e) => setFruit(e.target.value)}
@@ -271,7 +271,7 @@ It's possible to disable just some options or the whole set.
           options={options}
           value="apple"
         />
-      </React.Fragment>
+      </>
     );
   })
 ```

diff --git a/src/components/ScrollView/README.md b/src/components/ScrollView/README.md
@@ -400,7 +400,7 @@ React.createElement(() => {
     )`
   const [direction, setDirection] = React.useState('vertical');
   return(
-    <React.Fragment>
+    <>
       <Radio
         label="Direction:"
         onChange={(e) => setDirection(e.target.value)}
@@ -472,7 +472,7 @@ React.createElement(() => {
           </div>
         </ScrollView>
       </docoff-placeholder>
-    </React.Fragment>
+    </>
   );
 });
 ```