Found unnecessary fragments JS-0424
Fragments should contain more than one child - otherwise, there’s no need for a Fragment at all
104 <div className="flex w-full flex-col items-center justify-center">
105 <div className="flex items-center justify-center">
106 {!moderatorsisLoading ? (
107 <>108 {moderators?.map((moderator) => (109 <div110 key={moderator.id}111 className="grid grid-cols-3 items-center justify-center rounded-md bg-gray-600 py-4 text-xl text-gray-200 shadow-md"112 >113 <div className="flex items-center justify-center space-x-5">114 <Image115 className="rounded-full border border-gray-200"116 src={moderator.user.image || "_blank"}117 width={40}118 height={40}119 alt={"avatar"}120 />121 <h3 className="text-gray-200">122 {moderator.user.name}123 </h3>124 </div>125 <div className="flex items-center justify-center">126 {moderator.user.email}127 </div>128 <div className="flex items-center justify-center space-x-2">129 <div130 className={`m-1 h-2 w-2 animate-ping rounded-full ${131 moderator.status == 1132 ? "bg-orange-400"133 : moderator.status == 2134 ? "bg-green-400"135 : "bg-red-400"136 } `}137 />138 <p className="text-gray-200">139 {moderator.status == 1140 ? "Pending"141 : moderator.status == 2142 ? "Accepted"143 : "Rejected"}144 </p>145 </div>146 </div>147 ))}148 </>149 ) : (
150 <div className="flex items-center space-x-2">
151 <ImSpinner2 className="animate-spin text-gray-200" />
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>