Use JSX syntax for Fragments (#25093)

app/javascript/mastodon/components/admin/Counter.jsx

@@ -1,4 +1,4 @@
-import { PureComponent, Fragment } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import api from 'mastodon/api';
 import { FormattedNumber } from 'react-intl';
@@ -62,25 +62,25 @@ export default class Counter extends PureComponent {
 
     if (loading) {
       content = (
-        <Fragment>
+        <>
           <span className='sparkline__value__total'><Skeleton width={43} /></span>
           <span className='sparkline__value__change'><Skeleton width={43} /></span>
-        </Fragment>
+        </>
       );
     } else {
       const measure = data[0];
       const percentChange = measure.previous_total && percIncrease(measure.previous_total * 1, measure.total * 1);
 
       content = (
-        <Fragment>
+        <>
           <span className='sparkline__value__total'>{measure.human_value || <FormattedNumber value={measure.total} />}</span>
           {measure.previous_total && (<span className={classNames('sparkline__value__change', { positive: percentChange > 0, negative: percentChange < 0 })}>{percentChange > 0 && '+'}<FormattedNumber value={percentChange} style='percent' /></span>)}
-        </Fragment>
+        </>
       );
     }
 
     const inner = (
-      <Fragment>
+      <>
         <div className='sparkline__value'>
           {content}
         </div>
@@ -96,7 +96,7 @@ export default class Counter extends PureComponent {
             </Sparklines>
           )}
         </div>
-      </Fragment>
+      </>
     );
 
     if (href) {

app/javascript/mastodon/components/dropdown_menu.jsx

@@ -1,4 +1,4 @@
-import { PureComponent, cloneElement, Children, Fragment } from 'react';
+import { PureComponent, cloneElement, Children } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { IconButton } from './icon_button';
@@ -306,7 +306,7 @@ export default class Dropdown extends PureComponent {
     );
 
     return (
-      <Fragment>
+      <>
         <span ref={this.setTargetRef}>
           {button}
         </span>
@@ -329,7 +329,7 @@ export default class Dropdown extends PureComponent {
             </div>
           )}
         </Overlay>
-      </Fragment>
+      </>
     );
   }
 

app/javascript/mastodon/components/hashtag.jsx

@@ -1,5 +1,5 @@
 // @ts-check
-import { Component, Fragment } from 'react';
+import { Component } from 'react';
 import { Sparklines, SparklinesCurve } from 'react-sparklines';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
@@ -69,7 +69,7 @@ const Hashtag = ({ name, to, people, uses, history, className, description, with
   <div className={classNames('trends__item', className)}>
     <div className='trends__item__name'>
       <Link to={to}>
-        {name ? <Fragment>#<span>{name}</span></Fragment> : <Skeleton width={50} />}
+        {name ? <>#<span>{name}</span></> : <Skeleton width={50} />}
       </Link>
 
       {description ? (

app/javascript/mastodon/components/navigation_portal.jsx

@@ -5,14 +5,12 @@ import Trends from 'mastodon/features/getting_started/containers/trends_containe
 import AccountNavigation from 'mastodon/features/account/navigation';
 
 const DefaultNavigation = () => (
-  <>
-    {showTrends && (
-      <>
-        <div className='flex-spacer' />
-        <Trends />
-      </>
-    )}
-  </>
+  showTrends ? (
+    <>
+      <div className='flex-spacer' />
+      <Trends />
+    </>
+  ) : null
 );
 
 class NavigationPortal extends PureComponent {