Fragments should contain more than one child - otherwise, there’s no need for a Fragment at all
12 return (
13 <div className="mb-10" key={idx}>
14 {obj.images ? (
15 <>16 <div className="card w-72 card-bordered card-compact lg:card-normal border-solid border-black bg-white">17 <figure>18 <img src={obj.images[0]} />19 </figure>20 <div className="card-body">21 <h2 className="card-title">22 {obj.name}23 </h2>24 <p>{obj.description}</p>25 <p>26 built by -{' '}27 <span className="text-blue-700 cursor-pointer">28 @nwf29 </span>30 </p>31 </div>32 </div>33 </>34 ) : (
35 <div className="h-20 w-20 bg-red-500 rounded-xl text-center">
36 <span className="text-white">Fragments should contain more than one child - otherwise, there’s no need for a Fragment at all
6 const initialProps = await Document.getInitialProps(ctx)
7 return {
8 ...initialProps,
9 styles: <>{initialProps.styles}</>,10 }
11 }
12
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>