JSX tree is too deeply nested. Found 5 levels of nesting
87 });
88
89 return (
90 <Combobox 91 store={combobox} 92 onOptionSubmit={handleValueSelect} 93 withinPortal={false} 94 > 95 <Combobox.DropdownTarget>
96 <PillsInput
97 pointerJSX tree is too deeply nested. Found 5 levels of nesting
65
66 const options = data.map((item) => {
67 return (
68 <Combobox.Option 69 value={item.id} 70 key={item.id} 71 active={multiSelectValues.includes(item.id)} 72 > 73 <Group gap="sm" align="center">
74 {multiSelectValues.includes(item.id) ? <CheckIcon size={12} /> : null}
75 <Group gap={7} align="center">JSX tree is too deeply nested. Found 5 levels of nesting
38 const { definition } = widgetImports[innerProps.kind];
39
40 return (
41 <form42 onSubmit={form.onSubmit((v) => {43 innerProps.onSuccessfulEdit(v);44 actions.closeModal();45 })}46 >47 <FormProvider form={form}>
48 <Stack>
49 {innerProps.integrationSupport && (JSX tree is too deeply nested. Found 6 levels of nesting
27 const [opened, { toggle }] = useDisclosure(false);
28
29 return (
30 <Card withBorder p={0}>31 <Stack>
32 <Group wrap="nowrap" gap="sm">
33 <UnstyledButton w="100%" p="sm" onClick={toggle}>JSX tree is too deeply nested. Found 5 levels of nesting
45 };
46
47 return (
48 <Grid.Col span={{ xs: 12, sm: 4, md: 3 }}>49 <Card h="100%">
50 <Stack justify="space-between" h="100%">
51 <Stack gap="xs">JSX tree is too deeply nested. Found 6 levels of nesting
42 const colorScheme = "dark";
43
44 return (
45 <html lang="en">46 <head>
47 <ColorSchemeScript defaultColorScheme={colorScheme} />
48 </head>JSX tree is too deeply nested. Found 9 levels of nesting
32 const t = await getScopedI18n("board.setting");
33
34 return (
35 <Container> 36 <Stack>
37 <Title>{t("title", { boardName: capitalize(board.name) })}</Title>
38 <Accordion variant="separated" defaultValue="general">JSX tree is too deeply nested. Found 5 levels of nesting
132 </TableThead>
133 <TableTbody>
134 {integrations.map((integration) => (
135 <TableTr key={integration.id}>136 <TableTd>{integration.name}</TableTd>
137 <TableTd>
138 <AnchorJSX tree is too deeply nested. Found 6 levels of nesting
114 return (
115 <IntegrationGroupAccordion activeTab={activeTab}>
116 {objectEntries(grouppedIntegrations).map(([kind, integrations]) => (
117 <AccordionItem key={kind} value={kind}>118 <AccordionControl icon={<IntegrationAvatar size="sm" kind={kind} />}>
119 <Group>
120 <Text>{getIntegrationName(kind)}</Text>JSX tree is too deeply nested. Found 6 levels of nesting
51 const t = await getScopedI18n("integration");
52
53 return (
54 <Container> 55 <Stack>
56 <Group justify="space-between" align="center">
57 <Title>{t("page.list.title")}</Title>JSX tree is too deeply nested. Found 5 levels of nesting
83 };
84
85 return (
86 <form onSubmit={form.onSubmit((value) => void handleSubmit(value))}> 87 <Stack>
88 <TestConnectionNoticeAlert />
89JSX tree is too deeply nested. Found 5 levels of nesting
93 };
94
95 return (
96 <form onSubmit={form.onSubmit((v) => void handleSubmit(v))}> 97 <Stack>
98 <TestConnectionNoticeAlert />
99JSX tree is too deeply nested. Found 5 levels of nesting
44 const KindIcon = integrationSecretIcons[secret.kind];
45
46 return (
47 <Card>48 <Stack>
49 <Group justify="space-between">
50 <Group>
Description
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>
}
Bad Practice
function FormContainer() {
// This JSX tree is too deep
return <FormWrapper>
<Form>
<FormEntry>
<Label>
<strong>Name</strong>
</Label>
<FormInput type="text" / >
</FormEntry>
</Form>
</FormWrapper>
}
Recommended
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>
}