14}) {
15 const { backgroundColor, textColor } = useContextTheme();
16 return (
17 <>18 <div className={`flex flex-col min-h-screen ${backgroundColor}`}>19 <Navbar />20 <main className={`flex-grow ${backgroundColor} text-${textColor}`}>21 <HeroSection image={image} inNeed={inNeed} main={main} />22 {children}23 </main>24 <Footer />25 </div>26 </>27 );
28}
29
30 }
31 </CardParagraph>
32 }
33 title={<>{'Hot Meal Day'}</>}34 />
35 );
36}
37 </CardParagraph>
38 </>
39 }
40 title={<>{'Health Education Workshop'}</>}41 />
42 );
43}
30 }
31 </CardParagraph>
32 }
33 title={<>{'Food Distribution Support'}</>}34 />
35 );
36}
30 }
31 </CardParagraph>
32 }
33 title={<>{'Fall Prevention Class'}</>}34 />
35 );
36}
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:
Removing the fragments can fix this issue.
// 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>
// 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>