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">
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">
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">
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>
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)" />
Nesting JSX elements too deeply can confuse developers reading the code. To make maintenance and refactoring easier, DeepSource recommends limiting the maximum JSX tree depth to 4.
Code that looks like this is nearly unreadable for someone unfamiliar:
function App() {
return <Foo>
<Bar>
<Baz>
<div id="deep-div">
Too deeply nested!
</div>
</Baz>
</Bar>
</Foo>
}
function FormContainer() {
// This JSX tree is too deep
return <FormWrapper>
<Form>
<FormEntry>
<Label>
<strong>Name</strong>
</Label>
<FormInput type="text" / >
</FormEntry>
</Form>
</FormWrapper>
}
function FormContainer() {
// the FormEntry component has been modified to accept the labelName and inputType.
// It now returns JSX that contains a label and a field.
return <FormWrapper>
<Form>
<FormEntry labelName="Name" inputType="text">
</FormEntry>
</Form>
</FormWrapper>
}