JSX tree is too deeply nested. Found 6 levels of nesting
4
5const Navbar = () => {
6 return (
7 <> 8 <nav id="navbar">
9 <img id='logo' src={Logo} alt="logo" />
10 <ul>JSX tree is too deeply nested. Found 5 levels of nesting
186 </div>
187 <div className="colleges">
188 {filteredColleges.map((college, index) => (
189 <div190 className={`college ${activeIndex === index ? 'active' : ''}`}191 key={college.id}192 onClick={() => handleCollegeClick(college)}193 onTouchStart={() => handleTouchStart(index)}194 onTouchEnd={handleTouchEnd}195 >196 <div className="college-content">
197 <div className="up">
198 <img className="college-image" src={college.imageURL} alt="College Logo" />JSX tree is too deeply nested. Found 7 levels of nesting
101 }, []);
102
103 return (
104 <main>105 <div className="scroll">
106 <ScrollToTop
107 smooth
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>
}