Update Fragment

src/components/LoginPage.js

@@ -261,7 +261,7 @@ const LoginPage = () => {
     );
 
     return (
-      <Box>
+      <>
         <TextInput
           autoFocus
           name="username"
@@ -293,7 +293,7 @@ const LoginPage = () => {
           className="input"
         />
         <Box className="serverVersion">{serverVersion}</Box>
-      </Box>
+      </>
     );
   };
 

src/components/RoomDirectory.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from "react";
+import React from "react";
 import { Avatar } from "@mui/material";
 import FolderSharedIcon from "@mui/icons-material/FolderShared";
 import {
@@ -128,11 +128,7 @@ export const RoomDirectorySaveButton = () => {
   );
 };
 
-const RoomDirectoryBulkActionButtons = () => (
-  <Fragment>
-    <RoomDirectoryBulkDeleteButton />
-  </Fragment>
-);
+const RoomDirectoryBulkActionButtons = () => <RoomDirectoryBulkDeleteButton />;
 
 const AvatarField = ({ source, sx }) => {
   const record = useRecordContext();

src/components/ServerNotices.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from "react";
+import React, { useState } from "react";
 import {
   Button,
   SaveButton,
@@ -93,7 +93,7 @@ export const ServerNoticeButton = () => {
   };
 
   return (
-    <Fragment>
+    <>
       <Button
         label="resources.servernotices.send"
         onClick={handleDialogOpen}
@@ -106,7 +106,7 @@ export const ServerNoticeButton = () => {
         onClose={handleDialogClose}
         onSend={handleSend}
       />
-    </Fragment>
+    </>
   );
 };
 

src/components/devices.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from "react";
+import React, { useState } from "react";
 import {
   Button,
   useDelete,
@@ -41,7 +41,7 @@ export const DeviceRemoveButton = props => {
   };
 
   return (
-    <Fragment>
+    <>
       <Button
         label="ra.action.remove"
         onClick={handleClick}
@@ -70,6 +70,6 @@ export const DeviceRemoveButton = props => {
           name: record.display_name ? record.display_name : record.id,
         }}
       />
-    </Fragment>
+    </>
   );
 };

src/components/media.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from "react";
+import React, { useState } from "react";
 import {
   BooleanInput,
   Button,
@@ -119,7 +119,7 @@ export const DeleteMediaButton = props => {
   };
 
   return (
-    <Fragment>
+    <>
       <Button
         label="resources.delete_media.action.send"
         onClick={handleDialogOpen}
@@ -142,7 +142,7 @@ export const DeleteMediaButton = props => {
         onClose={handleDialogClose}
         onSend={handleSend}
       />
-    </Fragment>
+    </>
   );
 };
 
@@ -193,7 +193,7 @@ export const ProtectMediaButton = props => {
     Wrapping Tooltip with <div>
     https://github.com/marmelab/react-admin/issues/4349#issuecomment-578594735
     */
-    <Fragment>
+    <>
       {record.quarantined_by && (
         <Tooltip
           title={translate("resources.protect_media.action.none", {
@@ -238,7 +238,7 @@ export const ProtectMediaButton = props => {
           </div>
         </Tooltip>
       )}
-    </Fragment>
+    </>
   );
 };
 
@@ -285,7 +285,7 @@ export const QuarantineMediaButton = props => {
   };
 
   return (
-    <Fragment>
+    <>
       {record.safe_from_quarantine && (
         <Tooltip
           title={translate("resources.quarantine_media.action.none", {
@@ -325,6 +325,6 @@ export const QuarantineMediaButton = props => {
           </div>
         </Tooltip>
       )}
-    </Fragment>
+    </>
   );
 };

src/components/rooms.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from "react";
+import React from "react";
 import {
   BooleanField,
   BulkDeleteButton,
@@ -279,7 +279,7 @@ export const RoomShow = () => {
 };
 
 const RoomBulkActionButtons = () => (
-  <Fragment>
+  <>
     <RoomDirectoryBulkSaveButton />
     <RoomDirectoryBulkDeleteButton />
     <BulkDeleteButton
@@ -287,7 +287,7 @@ const RoomBulkActionButtons = () => (
       confirmContent="resources.rooms.action.erase.content"
       mutationMode="pessimistic"
     />
-  </Fragment>
+  </>
 );
 
 const RoomFilter = props => (