File .deepsource.toml
not found in the default branch of the repository root. Please refer to the docs.
174 ))}
175 </Row>
176 {yearlyCustom?.length > 0 && <h2>Custom Plans</h2>}
177 <Row gutter={[24, 32]}>178 {yearlyCustom?.map((item, key) => (179 <Col span={8} key={key}>180 <PlanCard plan={item} />181 </Col>182 ))}183 </Row>184 </div>
185 </Tabs.TabPane>
186 </Tabs>
166 </Tabs.TabPane>
167 <Tabs.TabPane tab="Yearly" key="3">
168 <div className=" flex flex-col space-y-6 ">
169 <Row gutter={[24, 32]}>170 {yearlyPlans?.map((item, key) => (171 <Col span={8} key={key}>172 <PlanCard plan={item} />173 </Col>174 ))}175 </Row>176 {yearlyCustom?.length > 0 && <h2>Custom Plans</h2>}
177 <Row gutter={[24, 32]}>
178 {yearlyCustom?.map((item, key) => (
115 </Row>
116 {allCustom?.length > 0 && <h2>Custom Plans</h2>}
117
118 <Row gutter={[24, 32]}>119 {allCustom?.map((item, key) => (120 <Col span={8} key={key}>121 <PlanCard plan={item} />122 </Col>123 ))}124 </Row>125 </div>
126 </Tabs.TabPane>
127
106 <Tabs defaultActiveKey="0" size="large">
107 <Tabs.TabPane tab="All" key="0">
108 <div className=" flex flex-col space-y-6 ">
109 <Row gutter={[24, 32]}>110 {allPlans?.map((item, key) => (111 <Col span={8} key={key}>112 <PlanCard plan={item} />113 </Col>114 ))}115 </Row>116 {allCustom?.length > 0 && <h2>Custom Plans</h2>}
117
118 <Row gutter={[24, 32]}>
127
128 <Tabs.TabPane tab="Monthly" key="1">
129 <div className=" flex flex-col space-y-6 ">
130 <Row gutter={[24, 32]}>131 {monthlyPlans?.map((item, key) => (132 <Col span={8} key={key}>133 <PlanCard plan={item} />134 </Col>135 ))}136 </Row>137 {monthlyCustom?.length > 0 && <h2>Custom Plans</h2>}
138
139 <Row gutter={[24, 32]}>
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>
}