Prefer fragment shorthand over React.Fragment
4import Subscription from './Subscription/Subscription';
5
6const Subscriptions = props => (
7 <Fragment> 8 <SideBarHeader title="subscriptions" /> 9 <Subscription label="MusicChannel" broadcasting />10 <Subscription label="Coursea" newVideoAmount="10" />11 <Subscription label="TEDx Talks" newVideoAmount="23" />12 <Subscription label="Stanford iOS" newVideoAmount="4" />13 <Subscription label="Udacity" newVideoAmount="114" />14 <Divider />15 </Fragment>16);
17
18export default Subscriptions;
Prefer fragment shorthand over React.Fragment
3
4export function SideBarFooter() {
5 return (
6 <React.Fragment> 7 <div className="footer-block"> 8 <div>About Press Copyright</div> 9 <div>Creators Advertise</div>10 <div>Developers +MyTube</div>11 <div>Legal</div>12 </div>13 <div className="footer-block">14 <div>Terms Privacy</div>15 <div>Policy & Safety</div>16 <div>Test new features</div>17 </div>18 <div className="footer-block">19 <div>All prices include VAT</div>20 </div>21 <div className="footer-block">22 <div>A Youtube clone.</div>23 </div>24 </React.Fragment>25 );
26}
Prefer fragment shorthand over React.Fragment
22
23 render() {
24 return (
25 <Fragment>26 <SideBar />27 <HomeContent videolist={this.state.data} />28 </Fragment>29 );
30 }
31}
Prefer fragment shorthand over React.Fragment
20 }
21
22 return (
23 <Fragment>24 <div className="video-infobox">25 <Image className="channel-image" src="https://via.placeholder.com/48x48" circular />26 <div className="video-info">27 <div className="channel-title">Some Channel Name</div>28 <div className="channel-date">Thu May 14 2015</div>29 </div>30 <Button className="subscibe" color="youtube">subscribe</Button>31 <div className="video-description">32 <div className={descriptionTextClass}>33 <p>First paragraph</p>34 <p>Second paragraph</p>35 <p>First paragraph</p>36 <p>First paragraph</p>37 <p>First paragraph</p>38 </div>39 <Button compact onClick={this.toggleShowMoreButton}>{buttonTitle}</Button>40 </div>41 </div>42 <Divider />43 </Fragment>44 );
45 }
46
Prefer fragment shorthand over React.Fragment
8 const divider = props.hideDivider ? null : <Divider />;
9
10 return (
11 <Fragment>12 <VideoGridHeader title={props.title} />13 <div className="video-grid">14 {15 props.videolist16 .map(video => <VideoPreview key={video.id} {...video} />)17 }1819 </div>20 {divider}21 </Fragment>22 );
23};
24
Prefer fragment shorthand over React.Fragment
4import { VideoPreview } from '../../VideoPreview/VideoPreview';
5
6const NextUpVideo = props => (
7 <Fragment> 8 <div className="nextup-container"> 9 <h4>Up next</h4>10 <div className="nextup-toggle">11 <span>Autoplay</span>12 <Checkbox toggle />13 </div>14 </div>15 <VideoPreview horizontal />16 <Divider />17 </Fragment>18
19);
20
Description
JSX Fragments can be written in two ways:
<React.Fragment> ... </React.Fragment>
: Fragment component.<> ... </>
: Syntactic sugar.
DeepSource recommends using the shorthand syntax over its alternative. This makes the code more concise and easier to read.
Bad Practice
<React.Fragment><Foo /></React.Fragment>
Recommended
<><Foo /></>