Found unnecessary fragments JS-0424
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">{obj.name}</h2>22 <p>{obj.description}</p>23 <p>24 built by -{" "}25 <span className="text-blue-700 cursor-pointer">26 @nwf27 </span>28 </p>29 </div>30 </div>31 </>32 ) : (
33 <div className="h-20 w-20 bg-red-500 rounded-xl text-center">
34 <span className="text-white">{obj.name}</span>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 }
12Fragments should contain more than one child - otherwise, there’s no need for a Fragment at all
21 </Provider>
22 )
23}
24const EmptyLayout = ({ children }: { children: any }) => <>{children}</>25const DefaultLayout = ({ children }: { children: any }) => {
26 const { data, isLoading, error } = useGetUserInfoQuery()
27 return (
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>