Fragments should contain more than one child - otherwise, there’s no need for a Fragment at all
4
5const Navbar = () => {
6 return (
7 <> 8 <nav id="navbar"> 9 <img id='logo' src={Logo} alt="logo" />10 <ul>11 <li><NavLink className={({isActive})=>isActive?'active': 'none'} to='/'>Home</NavLink></li>12 <li><NavLink className={({isActive})=>isActive?'active': 'none'} to='/about'>About</NavLink></li>13 <li>14 <div className='loginSignUpBtn'><NavLink className={({isActive})=>isActive?'active': 'none'} to='/login'>Login</NavLink></div>15 <div className='loginSignUpBtn'><NavLink className={({isActive})=>isActive?'active': 'none'} to='/signup'>Sign Up</NavLink></div>16 </li>17 </ul>18 </nav>19 </>20 )
21}
22export default Navbar
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>