32 <div className="addr-search">
33 <h1 className="search-text">Search an address</h1>
34 <form>
35 <input type='text'36 placeholder='search'37 className='addr-input' onChange={handleChange} />38 </form>
39 </div>
40 <h1>DEX Trade History</h1>
21 <p className='tx-swapped-price'>Swapped Token Price: {quote_price.toLocaleString()}</p>
22 <p className='tx-amt-usd'>Swapped Token Cost: ${amt_usd.toLocaleString()}</p>
23 <p className='tx-swapped-symbol'>Swapped Token Symbol: {swappedSymbol}</p>
24 <p className='tx-amm'>AMM: {amm}</p>25 </div>
26 </div>
27 </div>
20 <p className='tx-amt-in'>Swapped Token Quantity: {amt_in.toLocaleString()}</p>
21 <p className='tx-swapped-price'>Swapped Token Price: {quote_price.toLocaleString()}</p>
22 <p className='tx-amt-usd'>Swapped Token Cost: ${amt_usd.toLocaleString()}</p>
23 <p className='tx-swapped-symbol'>Swapped Token Symbol: {swappedSymbol}</p>24 <p className='tx-amm'>AMM: {amm}</p>
25 </div>
26 </div>
19 <p className='tx-base-price'>Base Token Price: ${base_price.toLocaleString()}</p>
20 <p className='tx-amt-in'>Swapped Token Quantity: {amt_in.toLocaleString()}</p>
21 <p className='tx-swapped-price'>Swapped Token Price: {quote_price.toLocaleString()}</p>
22 <p className='tx-amt-usd'>Swapped Token Cost: ${amt_usd.toLocaleString()}</p>23 <p className='tx-swapped-symbol'>Swapped Token Symbol: {swappedSymbol}</p>
24 <p className='tx-amm'>AMM: {amm}</p>
25 </div>
18 <p className='tx-amt-out'>Base Token Quantity: {amt_out.toLocaleString()}</p>
19 <p className='tx-base-price'>Base Token Price: ${base_price.toLocaleString()}</p>
20 <p className='tx-amt-in'>Swapped Token Quantity: {amt_in.toLocaleString()}</p>
21 <p className='tx-swapped-price'>Swapped Token Price: {quote_price.toLocaleString()}</p>22 <p className='tx-amt-usd'>Swapped Token Cost: ${amt_usd.toLocaleString()}</p>
23 <p className='tx-swapped-symbol'>Swapped Token Symbol: {swappedSymbol}</p>
24 <p className='tx-amm'>AMM: {amm}</p>
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>
}