Fragments should contain more than one child - otherwise, there’s no need for a Fragment at all
292 loadingManager={{ setLoading: setLoadingPage, isLoading: loadingPage }}
293 />
294 </Grid.Col>
295 <>296 <Grid.Col xs={12} sm={8} md={8}>297 {data?.resultCount === 0 && crisisResults ? (298 <NoResults crisisData={crisisResults} />299 ) : (300 <>301 <StateAlertBanner302 stateInUS={stateInUS}303 variantInheritStyle={variants.Link.inheritStyle}304 variantBlack={variants.Text.utility1}305 variantWhite={variants.Text.utility1white}306 infoColor={theme.other.colors.secondary.cornflower}307 warningColor={theme.fn.lighten(theme.other.colors.tertiary.pink, 0.3)}308 ></StateAlertBanner>309 {resultDisplay}310 <Pagination total={getSearchResultPageCount(data?.resultCount)} />311 </>312 )}313 </Grid.Col>314 </>315 <Grid.Col xs={12} sm={8} md={8}>
316 {data?.resultCount === 0 && crisisResults ? (
317 <NoResults crisisData={crisisResults} />
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>