DevClad-Inc / devclad

Validation of JSX maximum depth JS-0415
Anti-pattern
Minor
a year agoa year old
JSX tree is too deeply nested. Found 6 levels of nesting
140
141				<ul className="mt-5 grid grid-cols-2 gap-6 sm:grid-cols-3">
142					{data.data.users.map((user: ManagedUser) => (
143						<li144							key={user.id}145							className="bg-darkBG2 col-span-1 divide-y divide-neutral-800 rounded-md border-[1px] border-neutral-800 shadow-2xl shadow-white/5"146						>147							<div className="flex w-full items-center justify-between space-x-6 p-6">
148								<div className="flex-1 truncate">
149									<div className="flex items-center space-x-3">
JSX tree is too deeply nested. Found 8 levels of nesting
101
102	if (isSuccess && data !== null) {
103		return (
104			<div className="bg-darkBG1 min-h-screen">105				<div className="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
106					<div className="px-4 py-6 sm:px-0">
107						<div className="h-96 rounded-lg border-4 border-dashed border-neutral-800">
Expected the depth of nested jsx elements to be <= 2, but found 5
221												className=" bg-darkBG2 inline-flex items-center
222                   justify-center rounded-full border-[1px] border-dotted border-fuchsia-200 p-4 shadow-lg"
223											>
224												<feature.icon225													className="h-8 w-8 stroke-fuchsia-100 stroke-2"226													aria-hidden="true"227												/>228											</span>
229										</div>
230										<h3 className="mt-8 font-bold tracking-tight text-neutral-100 sm:text-xl lg:text-2xl">
Expected the depth of nested jsx elements to be <= 2, but found 3
211				</p>
212
213				<div className="mt-12 flex justify-center">
214					<div className="grid max-w-prose grid-cols-1 gap-8 sm:grid-cols-2">215						{roadmap.map((feature) => (216							<div key={feature.name} className="pt-6">217								<div className="flow-root h-full rounded-xl border-[1px] border-neutral-800 bg-black px-6 pb-8 ">218									<div className="-mt-6">219										<div>220											<span221												className=" bg-darkBG2 inline-flex items-center222                   justify-center rounded-full border-[1px] border-dotted border-fuchsia-200 p-4 shadow-lg"223											>224												<feature.icon225													className="h-8 w-8 stroke-fuchsia-100 stroke-2"226													aria-hidden="true"227												/>228											</span>229										</div>230										<h3 className="mt-8 font-bold tracking-tight text-neutral-100 sm:text-xl lg:text-2xl">231											{feature.name}232										</h3>233										<p className="font-monoNext mt-5 text-neutral-300 sm:text-sm lg:text-lg">234											{feature.description}235										</p>236									</div>237								</div>238							</div>239						))}240					</div>241				</div>
242			</div>
243		</div>
Expected the depth of nested jsx elements to be <= 2, but found 4
185						height={20}
186						patternUnits="userSpaceOnUse"
187					>
188						<rect189							x={0}190							y={0}191							width={4}192							height={4}193							className="text-neutral-900"194							fill="currentColor"195						/>196					</pattern>
197				</defs>
198				<rect width={404} height={784} fill="url(#64e643ad-2176-4f86-b3d7-f2c5da3b6a6d)" />