ICU Fixathon - clean up React.Fragment old syntax (#29006)

* ICU Fixathon - clean up React.Fragment old syntax

* enforce use of fragment shorthand over React.Fragment

* use short version of fragment

webapp/channels/.eslintrc.json

@@ -32,7 +32,8 @@
     "react/style-prop-object": [2, {
       "allow": ["Timestamp"]
     }],
-    "formatjs/no-multiple-whitespaces": 2
+    "formatjs/no-multiple-whitespaces": 2,
+    "react/jsx-fragments": ["error", "syntax"]
   },
   "overrides": [
     {

webapp/channels/src/components/admin_console/plugin_management/plugin_management.tsx

@@ -927,8 +927,8 @@ class PluginManagement extends OLDAdminSettings<Props, State> {
     renderSettings = () => {
         const {enableUploads} = this.state;
         const enable = this.props.config?.PluginSettings?.Enable;
-        let serverError = <React.Fragment/>;
+        let serverError = <></>;
-        let lastMessage = <React.Fragment/>;
+        let lastMessage = <></>;
 
         // Using props values to make sure these are set on the server and not just locally
         const enableUploadButton = enableUploads && enable && !(this.props.config.PluginSettings && this.props.config.PluginSettings.RequirePluginSignature);

webapp/channels/src/components/admin_console/system_user_detail/team_list/team_list.tsx

@@ -176,7 +176,7 @@ export default class TeamList extends React.PureComponent<Props, State> {
             );
         }
         return (
-            <React.Fragment>
+            <>
                 <div>{serverError}</div>
                 <AbstractList
                     headerLabels={headerLabels}
@@ -187,7 +187,7 @@ export default class TeamList extends React.PureComponent<Props, State> {
                     emptyList={this.props.emptyList}
                     userId={this.props.userId}
                 />
-            </React.Fragment>
+            </>
         );
     }
 }

webapp/channels/src/components/apps_form/apps_form_component.tsx

@@ -451,10 +451,10 @@ export class AppsForm extends React.PureComponent<Props, State> {
         }
 
         return (
-            <React.Fragment>
+            <>
                 {iconComponent}
                 {title}
-            </React.Fragment>
+            </>
         );
     }
 
@@ -487,7 +487,7 @@ export class AppsForm extends React.PureComponent<Props, State> {
         const {fields, header} = this.props.form;
 
         return (fields || header) && (
-            <React.Fragment>
+            <>
                 {header && (
                     <AppsFormHeader
                         id='appsModalHeader'
@@ -495,7 +495,7 @@ export class AppsForm extends React.PureComponent<Props, State> {
                     />
                 )}
                 {this.renderElements()}
-            </React.Fragment>
+            </>
         );
     }
 
@@ -549,7 +549,7 @@ export class AppsForm extends React.PureComponent<Props, State> {
         }
 
         return (
-            <React.Fragment>
+            <>
                 <div>
                     {this.state.formError && (
                         <div>
@@ -571,7 +571,7 @@ export class AppsForm extends React.PureComponent<Props, State> {
                     </button>
                     {submitButtons}
                 </div>
-            </React.Fragment>
+            </>
         );
     }
 

webapp/channels/src/components/apps_form/apps_form_field/apps_form_field.tsx

@@ -73,26 +73,26 @@ export default class AppsFormField extends React.PureComponent<Props> {
         const displayName = (field.modal_label || field.label) as string;
         let displayNameContent: React.ReactNode = (field.modal_label || field.label) as string;
         displayNameContent = (
-            <React.Fragment>
+            <>
                 {displayName}
                 {!field.is_required && (
                     <span className='light'>
                         {' (optional)'}
                     </span>
                 )}
-            </React.Fragment>
+            </>
         );
 
         const helpText = field.description;
         let helpTextContent: React.ReactNode = <Markdown message={helpText}/>;
         if (errorText) {
             helpTextContent = (
-                <React.Fragment>
+                <>
                     <Markdown message={helpText}/>
                     <div className='error-text mt-3'>
                         {errorText}
                     </div>
-                </React.Fragment>
+                </>
             );
         }
 

webapp/channels/src/components/browse_channels/browse_channels.tsx

@@ -339,7 +339,7 @@ export default class BrowseChannels extends React.PureComponent<Props, State> {
         );
 
         const body = this.state.loading ? <LoadingScreen/> : (
-            <React.Fragment>
+            <>
                 <SearchableChannelList
                     channels={this.activeChannels}
                     channelsPerPage={CHANNELS_PER_PAGE}
@@ -359,7 +359,7 @@ export default class BrowseChannels extends React.PureComponent<Props, State> {
                     channelsMemberCount={this.props.channelsMemberCount}
                 />
                 {serverError}
-            </React.Fragment>
+            </>
         );
 
         const title = (

webapp/channels/src/components/channel_header/channel_header_title_direct.tsx

@@ -25,7 +25,7 @@ const ChannelHeaderTitleDirect = ({
     const displayName = displayUsername(dmUser, teammateNameDisplaySetting);
 
     return (
-        <React.Fragment>
+        <>
             {currentUser.id !== dmUser?.id && displayName + ' '}
             {currentUser.id === dmUser?.id &&
                 <FormattedMessage
@@ -34,7 +34,7 @@ const ChannelHeaderTitleDirect = ({
                     values={{displayName}}
                 />}
             {isGuest(dmUser?.roles ?? '') && <GuestTag/>}
-        </React.Fragment>
+        </>
     );
 };
 

webapp/channels/src/components/channel_header/channel_header_title_group.tsx

@@ -48,7 +48,7 @@ const ChannelHeaderTitleGroup = ({
     const displayNames = channel.display_name.split(', ');
 
     return (
-        <React.Fragment>
+        <>
             {displayNames.map((displayName, index) => {
                 if (!membersMap[displayName]) {
                     return displayName;
@@ -64,7 +64,7 @@ const ChannelHeaderTitleGroup = ({
                     </React.Fragment>
                 );
             })}
-        </React.Fragment>
+        </>
     );
 };
 

webapp/channels/src/components/channel_header_dropdown/channel_header_dropdown_items.tsx

@@ -105,7 +105,7 @@ export default class ChannelHeaderDropdown extends React.PureComponent<Props> {
         });
 
         return (
-            <React.Fragment>
+            <>
                 <MenuItemToggleInfo
                     show={channel.type !== Constants.DM_CHANNEL && channel.type !== Constants.GM_CHANNEL}
                     channel={channel}
@@ -344,7 +344,7 @@ export default class ChannelHeaderDropdown extends React.PureComponent<Props> {
                         />
                     </ChannelPermissionGate>
                 </Menu.Group>
-            </React.Fragment>
+            </>
         );
     }
 }

webapp/channels/src/components/channel_name_form_field/channel_name_form_field.tsx

@@ -117,7 +117,7 @@ const ChannelNameFormField = (props: Props): JSX.Element => {
     }, [displayNameError, urlError]);
 
     return (
-        <React.Fragment>
+        <>
             <Input
                 type='text'
                 autoComplete='off'
@@ -144,7 +144,7 @@ const ChannelNameFormField = (props: Props): JSX.Element => {
                 error={urlError || props.urlError}
                 onChange={handleOnURLChange}
             />
-        </React.Fragment>
+        </>
     );
 };
 

webapp/channels/src/components/convert_gm_to_channel_modal/convert_gm_to_channel_modal.tsx

@@ -168,7 +168,7 @@ const ConvertGmToChannelModal = (props: Props) => {
             );
         } else {
             subBody = (
-                <React.Fragment>
+                <>
                     <WarningTextSection channelMemberNames={channelMemberNames}/>
 
                     {
@@ -199,7 +199,7 @@ const ConvertGmToChannelModal = (props: Props) => {
                         </div>
                     }
 
-                </React.Fragment>
+                </>
             );
         }
 

webapp/channels/src/components/file_preview/file_progress_preview.tsx

@@ -37,7 +37,7 @@ export default class FileProgressPreview extends React.PureComponent<Props> {
             previewImage = <div className={'file-icon ' + Utils.getIconClassName(fileType)}/>;
 
             fileNameComponent = (
-                <React.Fragment>
+                <>
                     <FilenameOverlay
                         fileInfo={fileInfo}
                         compactDisplay={false}
@@ -50,16 +50,16 @@ export default class FileProgressPreview extends React.PureComponent<Props> {
                                 defaultMessage='Processing...'
                             />
                         ) : (
-                            <React.Fragment>
+                            <>
                                 <FormattedMessage
                                     id='admin.plugin.uploading'
                                     defaultMessage='Uploading...'
                                 />
                                 <span>{percentTxt}</span>
-                            </React.Fragment>
+                            </>
                         )}
                     </span>
-                </React.Fragment>
+                </>
             );
 
             if (percent) {

webapp/channels/src/components/integrations/bots/bots.tsx

@@ -151,7 +151,7 @@ export default class Bots extends React.PureComponent<Props, State> {
             return React.cloneElement(child, {filter: props.filter});
         });
         return (
-            <React.Fragment>
+            <>
                 <div className='bot-disabled'>
                     <FormattedMessage
                         id='bots.disabled'
@@ -161,7 +161,7 @@ export default class Bots extends React.PureComponent<Props, State> {
                 <div className='bot-list__disabled'>
                     {botsToDisplay}
                 </div>
-            </React.Fragment>
+            </>
         );
     }
 
@@ -244,7 +244,7 @@ export default class Bots extends React.PureComponent<Props, State> {
                     />
                 }
                 helpText={
-                    <React.Fragment>
+                    <>
                         <FormattedMessage
                             id='bots.manage.help1'
                             defaultMessage='Use {botAccounts} to integrate with Mattermost through plugins or the API. Bot accounts are available to everyone on your server. '
@@ -269,7 +269,7 @@ export default class Bots extends React.PureComponent<Props, State> {
                                 a: (chunks: string) => <Link to='/admin_console/integrations/bot_accounts'>{chunks}</Link>,
                             }}
                         />
-                    </React.Fragment>
+                    </>
                 }
                 searchPlaceholder={Utils.localizeMessage({id: 'bots.manage.search', defaultMessage: 'Search Bot Accounts'})}
                 loading={this.state.loading}

webapp/channels/src/components/interactive_dialog/dialog_element/dialog_element.tsx

@@ -121,7 +121,7 @@ export default class DialogElement extends React.PureComponent<Props, State> {
         let displayNameContent: React.ReactNode = displayName;
         if (optional) {
             displayNameContent = (
-                <React.Fragment>
+                <>
                     {displayName + ' '}
                     <span className='font-weight--normal light'>
                         <FormattedMessage
@@ -129,26 +129,26 @@ export default class DialogElement extends React.PureComponent<Props, State> {
                             defaultMessage='(optional)'
                         />
                     </span>
-                </React.Fragment>
+                </>
             );
         } else {
             displayNameContent = (
-                <React.Fragment>
+                <>
                     {displayName}
                     <span className='error-text'>{' *'}</span>
-                </React.Fragment>
+                </>
             );
         }
 
         let helpTextContent: React.ReactNode = helpText;
         if (errorText) {
             helpTextContent = (
-                <React.Fragment>
+                <>
                     {helpText}
                     <div className='error-text mt-3'>
                         {errorText}
                     </div>
-                </React.Fragment>
+                </>
             );
         }
 

webapp/channels/src/components/invitation_modal/add_to_channels.tsx

@@ -143,7 +143,7 @@ export default function AddToChannels(props: Props) {
                 </div>
             )}
             {props.customMessage.open && (
-                <React.Fragment>
+                <>
                     <div className={'AddToChannels__customMessageTitle ' + props.titleClass}>
                         <FormattedMessage
                             id='invitation_modal.guests.custom-message.title'
@@ -159,7 +159,7 @@ export default function AddToChannels(props: Props) {
                         onChange={(e) => props.setCustomMessage(e.target.value)}
                         value={props.customMessage.message}
                     />
-                </React.Fragment>
+                </>
             )}
         </div>
     </div>);

webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx

@@ -60,10 +60,10 @@ function KeyboardShortcutSequence({shortcut, hideDescription, hoistDescription,
         ));
 
         return (
-            <React.Fragment>
+            <>
                 <span>{'\t|\t'}</span>
                 {shortcutKeys}
-            </React.Fragment>
+            </>
         );
     };
 

webapp/channels/src/components/link_tooltip/link_tooltip.tsx

@@ -110,7 +110,7 @@ export default class LinkTooltip extends React.PureComponent<Props, State> {
             'data-channel-mention': attributes['data-channel-mention'],
         };
         return (
-            <React.Fragment>
+            <>
                 {ReactDOM.createPortal(
                     <div
                         style={tooltipContainerStyles}
@@ -132,7 +132,7 @@ export default class LinkTooltip extends React.PureComponent<Props, State> {
                 >
                     {children}
                 </span>
-            </React.Fragment>
+            </>
         );
     }
 }

webapp/channels/src/components/post_view/combined_system_message/combined_system_message.tsx

@@ -378,9 +378,9 @@ export class CombinedSystemMessage extends React.PureComponent<Props> {
         }
 
         return (
-            <React.Fragment>
+            <>
                 {content}
-            </React.Fragment>
+            </>
         );
     }
 }

webapp/channels/src/components/post_view/post_body_additional_content/post_body_additional_content.tsx

@@ -156,13 +156,13 @@ export default class PostBodyAdditionalContent extends React.PureComponent<Props
             if (hasValidEmbeddedBinding(this.props.post.props)) {
                 // TODO Put some log / message if the form is not valid?
                 return (
-                    <React.Fragment>
+                    <>
                         {this.props.children}
                         <EmbeddedBindings
                             embeds={this.props.post.props.app_bindings}
                             post={this.props.post}
                         />
-                    </React.Fragment>
+                    </>
                 );
             }
         }

webapp/channels/src/components/post_view/post_image/post_image.tsx

@@ -64,7 +64,7 @@ const PostImage = ({
                 imageMetadata={imageMetadata}
             >
                 {(safeLink) => (
-                    <React.Fragment>
+                    <>
                         <SizeAwareImage
                             className='img-div attachment__image cursor--pointer'
                             src={safeLink}
@@ -72,7 +72,7 @@ const PostImage = ({
                             showLoader={true}
                             onClick={showModal}
                         />
-                    </React.Fragment>
+                    </>
                 )}
             </ExternalImage>
         </div>

webapp/channels/src/components/post_view/post_list_virtualized/post_list_virtualized.tsx

@@ -683,7 +683,7 @@ export default class PostList extends React.PureComponent<Props, State> {
                 aria-label={Utils.localizeMessage({id: 'accessibility.sections.centerContent', defaultMessage: 'message list main region'})}
             >
                 {this.props.isMobileView && (
-                    <React.Fragment>
+                    <>
                         <FloatingTimestamp
                             isScrolling={this.state.isScrolling}
                             postId={this.state.topPostId}
@@ -693,7 +693,7 @@ export default class PostList extends React.PureComponent<Props, State> {
                             atBottom={Boolean(this.state.atBottom)}
                             onClick={this.scrollToBottom}
                         />
-                    </React.Fragment>
+                    </>
                 )}
                 <div
                     className='post-list-holder-by-time'
@@ -709,7 +709,7 @@ export default class PostList extends React.PureComponent<Props, State> {
                             <LatestPostReader postIds={this.props.postListIds}/>
                             <AutoSizer>
                                 {({height, width}) => (
-                                    <React.Fragment>
+                                    <>
                                         <div>
                                             <Pluggable
                                                 pluggableName='ChannelToast'
@@ -740,7 +740,7 @@ export default class PostList extends React.PureComponent<Props, State> {
                                         >
                                             {this.renderRow}
                                         </DynamicSizeList>
-                                    </React.Fragment>
+                                    </>
                                 )}
                             </AutoSizer>
                         </div>

webapp/channels/src/components/post_view/post_reaction/post_reaction.tsx

@@ -80,7 +80,7 @@ export default class PostReaction extends React.PureComponent<Props, State> {
                 teamId={teamId}
                 permissions={[Permissions.ADD_REACTION]}
             >
-                <React.Fragment>
+                <>
                     <EmojiPickerOverlay
                         show={showEmojiPicker}
                         target={this.props.getDotMenuRef}
@@ -107,7 +107,7 @@ export default class PostReaction extends React.PureComponent<Props, State> {
                             <EmojiIcon className='icon icon--small'/>
                         </button>
                     </WithTooltip>
-                </React.Fragment>
+                </>
             </ChannelPermissionGate>
         );
     }

webapp/channels/src/components/post_view/post_recent_reactions/post_recent_reactions.tsx

@@ -99,13 +99,13 @@ export default class PostRecentReactions extends React.PureComponent<Props, Stat
                     placement='top'
                 >
                     <div>
-                        <React.Fragment>
+                        <>
                             <EmojiItem
                                 emoji={emoji}
                                 onItemClick={this.handleToggleEmoji}
                                 order={n}
                             />
-                        </React.Fragment>
+                        </>
                     </div>
                 </WithTooltip>
             </ChannelPermissionGate>

webapp/channels/src/components/quick_input/max_length_input.tsx

@@ -25,7 +25,7 @@ const MaxLengthInput: FC<InputProps> = forwardRef<HTMLInputElement, InputProps>(
         });
 
         return (
-            <Fragment>
+            <>
                 <input
                     className={classes}
                     defaultValue={defaultValue}
@@ -38,7 +38,7 @@ const MaxLengthInput: FC<InputProps> = forwardRef<HTMLInputElement, InputProps>(
                         {excess}
                     </span>
                 )}
-            </Fragment>
+            </>
         );
     },
 );

webapp/channels/src/components/search_hint/search_hint.tsx

@@ -104,7 +104,7 @@ const SearchHint = (props: Props): JSX.Element => {
     }
 
     return (
-        <React.Fragment>
+        <>
             {props.withTitle && (!props.searchType) &&
                 <h4 className='search-hint__title'>
                     <FormattedMessage
@@ -154,7 +154,7 @@ const SearchHint = (props: Props): JSX.Element => {
                         </div>
                     </li>))}
             </ul>
-        </React.Fragment>
+        </>
     );
 };
 

webapp/channels/src/components/sidebar/sidebar.tsx

@@ -210,9 +210,9 @@ export default class Sidebar extends React.PureComponent<Props, State> {
         }
 
         return (
-            <React.Fragment>
+            <>
                 {moreDirectChannelsModal}
-            </React.Fragment>
+            </>
         );
     };
 

webapp/channels/src/components/sidebar/sidebar_category/sidebar_category.tsx

@@ -173,7 +173,7 @@ export default class SidebarCategory extends React.PureComponent<Props, State> {
         }
 
         return (
-            <React.Fragment>
+            <>
                 <Draggable
                     draggableId={`NEW_CHANNEL_SPACER__${category.id}`}
                     isDragDisabled={true}
@@ -212,7 +212,7 @@ export default class SidebarCategory extends React.PureComponent<Props, State> {
                         </span>
                     </div>
                 </div>
-            </React.Fragment>
+            </>
         );
     };
 
@@ -270,7 +270,7 @@ export default class SidebarCategory extends React.PureComponent<Props, State> {
             const addHelpLabel = localizeMessage({id: 'sidebar.createDirectMessage', defaultMessage: 'Create new direct message'});
 
             categoryMenu = (
-                <React.Fragment>
+                <>
                     <SidebarCategorySortingMenu
                         category={category}
                         handleOpenDirectMessagesModal={this.handleOpenDirectMessagesModal}
@@ -297,7 +297,7 @@ export default class SidebarCategory extends React.PureComponent<Props, State> {
                             <i className='icon-plus'/>
                         </button>
                     </WithTooltip>
-                </React.Fragment>
+                </>
             );
 
             if (!channelIds || !channelIds.length) {

webapp/channels/src/components/size_aware_image.tsx

@@ -446,7 +446,7 @@ export default class SizeAwareImage extends React.PureComponent<Props, State> {
         const shouldShowImg = !this.dimensionsAvailable(dimensions) || this.state.loaded;
 
         return (
-            <React.Fragment>
+            <>
                 {fallback}
                 <div
                     className='file-preview__button'
@@ -454,7 +454,7 @@ export default class SizeAwareImage extends React.PureComponent<Props, State> {
                 >
                     {this.renderImageWithContainerIfNeeded()}
                 </div>
-            </React.Fragment>
+            </>
         );
     };
 

webapp/channels/src/components/toast_wrapper/toast_wrapper.tsx

@@ -514,9 +514,9 @@ export class ToastWrapperClass extends React.PureComponent<Props, State> {
         const toastToRender = this.getToastToRender();
 
         return (
-            <React.Fragment>
+            <>
                 {toastToRender}
-            </React.Fragment>
+            </>
         );
     }
 }

webapp/channels/src/components/user_settings/display/user_settings_theme/color_chooser/color_chooser.tsx

@@ -18,13 +18,13 @@ export default function ColorChooser(props: Props) {
     };
 
     return (
-        <React.Fragment>
+        <>
             <label className='custom-label'>{props.label}</label>
             <ColorInput
                 id={props.id}
                 value={props.value}
                 onChange={handleChange}
             />
-        </React.Fragment>
+        </>
     );
 }

webapp/channels/src/components/widgets/inputs/channels_input.tsx

@@ -130,11 +130,11 @@ export default class ChannelsInput<T extends Channel> extends React.PureComponen
             icon = <PrivateChannelIcon className='private-channel-icon'/>;
         }
         return (
-            <React.Fragment>
+            <>
                 {icon}
                 {channel.display_name}
                 <span className='channel-name'>{channel.name}</span>
-            </React.Fragment>
+            </>
         );
     };
 

webapp/channels/src/components/widgets/inputs/users_emails_input.tsx

@@ -151,7 +151,7 @@ export default class UsersEmailsInput extends React.PureComponent<Props, State>
                 return this.getCreateLabel((user as EmailInvite).value);
             }
             return (
-                <React.Fragment>
+                <>
                     <Avatar
                         size='lg'
                         username={(user as UserProfile).username}
@@ -160,21 +160,21 @@ export default class UsersEmailsInput extends React.PureComponent<Props, State>
                     {this.renderUserName(user as UserProfile)}
                     {botBadge}
                     {guestBadge}
-                </React.Fragment>
+                </>
             );
         }
 
         if ((user as EmailInvite).value && isEmail((user as EmailInvite).value)) {
             return (
-                <React.Fragment>
+                <>
                     <MailIcon className='mail-icon'/>
                     <span>{(user as EmailInvite).value}</span>
-                </React.Fragment>
+                </>
             );
         }
 
         return (
-            <React.Fragment>
+            <>
                 <Avatar
                     size='sm'
                     username={(user as UserProfile).username}
@@ -183,7 +183,7 @@ export default class UsersEmailsInput extends React.PureComponent<Props, State>
                 {getDisplayName(user as UserProfile)}
                 {botBadge}
                 {guestBadge}
-            </React.Fragment>
+            </>
         );
     };
 
@@ -203,7 +203,7 @@ export default class UsersEmailsInput extends React.PureComponent<Props, State>
     };
 
     getCreateLabel = (value: string) => (
-        <React.Fragment>
+        <>
             <MailPlusIcon className='mail-plus-icon'/>
             <FormattedMarkdownMessage
                 key='widgets.users_emails_input.valid_email'
@@ -211,7 +211,7 @@ export default class UsersEmailsInput extends React.PureComponent<Props, State>
                 values={{email: value}}
                 disableLinks={true}
             />
-        </React.Fragment>
+        </>
     );
 
     Input = (props: InputProps) => {

webapp/channels/src/components/widgets/menu/menu_items/submenu_item.tsx

@@ -159,10 +159,10 @@ export default class SubMenuItem extends React.PureComponent<Props, State> {
         let textProp = text;
         if (icon) {
             textProp = (
-                <React.Fragment>
+                <>
                     <span className={classNames(['icon', {'sorting-menu-icon': styleSelectableItem}])}>{icon}</span>
                     {textProp}
-                </React.Fragment>
+                </>
             );
         }
 

webapp/channels/src/plugins/channel_header_plug/channel_header_plug.tsx

@@ -338,7 +338,7 @@ class ChannelHeaderPlug extends React.PureComponent<ChannelHeaderPlugProps, Chan
                                 />
                             }
                         >
-                            <React.Fragment>
+                            <>
                                 <PluginChannelHeaderIcon
                                     id='pluginChannelHeaderIcon'
                                     className='icon icon--standard icon__pluginChannelHeader'
@@ -350,7 +350,7 @@ class ChannelHeaderPlug extends React.PureComponent<ChannelHeaderPlugProps, Chan
                                 >
                                     {items.length}
                                 </span>
-                            </React.Fragment>
+                            </>
                         </WithTooltip>
                     </CustomToggle>
                     <CustomMenu

webapp/channels/src/plugins/pluggable/pluggable.tsx

@@ -123,8 +123,8 @@ export default function Pluggable(props: Props): JSX.Element | null {
     }
 
     return (
-        <React.Fragment>
+        <>
             {content}
-        </React.Fragment>
+        </>
     );
 }