Fragments should contain more than one child - otherwise, there’s no need for a Fragment at all
17 const data = results.data;
18
19 return (
20 <>21 22 <div>23 <div className="picture">24 <h2>Astromomy Picture Of The Day</h2>25 <figure>26 {data.media_type === "video" ? (27 <iframe src={data.url} title="a">28 {data.title}29 </iframe>30 ) : (31 <img src={data.url} alt={data.title} />32 )}33 <figcaption>34 {data.copyright && <p>Image Credits and Copyright: {data.copyright}</p>}35 <p className="title">36 {data.title} - {getReadableDate(data.date)}37 </p>38 </figcaption>39 </figure>404142 </div>4344 <div className="explaination">45 <p>{data.explanation}</p>46 </div>47 </div>48 49 50 </>51 );
52};
53
Description
Fragments are a syntax that allow you to build a react component with multiple nodes or subcomponents, without requiring a wrapper element.
A fragment is considered to be redundant if:
- it contains only one child,
- it is the child of a html element,
- it is not a keyed fragment.
Removing the fragments can fix this issue.
Bad Practice
// Example 1
<>{foo}</>
// Example 2
<><Foo /></>
// Example 3
<p><>foo</></p>
// Example 4
<></>
// Example 5
<Fragment>foo</Fragment>
// Example 6
<React.Fragment>foo</React.Fragment>
// Example 7
<section>
<>
<div />
<div />
</>
</section>
Recommended
// Example 1
<>
<Foo />
<Bar />
</>
// Example 2
<>foo {bar}</>
// Example 3
<> {foo}</>
// Example 4
const cat = <>meow</>
// Example 5
<SomeComponent>
<>
<div />
<div />
</>
</SomeComponent>
// Example 6
<Fragment key={item.id}>{item.value}</Fragment>