@jebbaited
Posted
Hey!
1: Avoid using repeatable code. You work with React. Create components and pass props inside. If you don't need Component for some part of your code you could declare an array and fill it with, for example, nav names. Then just map it and you will have less code and high readability. Here is example from your repository. You use the same code 5 times and then 5 times more, but for phone view. Try to change it using advice above.
<li className="md:px-6 text-sm md:text-sm cursor-pointer capitalize font-inter font-normal text-Dark-grayish-blue hover:text-Soft-red"
onClick={() => { setNav(!nav); closeNavOnLargeScreen() }}>Home</li>
<li className="md:px-6 text-sm md:text-sm cursor-pointer capitalize font-inter font-normal text-Dark-grayish-blue hover:text-Soft-red"
onClick={() => { setNav(!nav); closeNavOnLargeScreen() }}>New</li>
<li className="md:px-6 text-sm md:text-sm cursor-pointer capitalize font-inter font-normal text-Dark-grayish-blue hover:text-Soft-red"
onClick={() => { setNav(!nav); closeNavOnLargeScreen() }}>Popular</li>
<li className="md:px-6 text-sm md:text-sm cursor-pointer capitalize font-inter font-normal text-Dark-grayish-blue hover:text-Soft-red"
onClick={() => { setNav(!nav); closeNavOnLargeScreen() }}>Trending</li>
<li className="md:px-6 text-sm md:text-sm cursor-pointer capitalize font-inter font-normal text-Dark-grayish-blue hover:text-Soft-red"
onClick={() => { setNav(!nav); closeNavOnLargeScreen() }}>Categories</li>
Same propblem here:
{/* one */}
<div className="flex flex-col">
<h4 className="text text-Off-white hover:text-Soft-orange cursor-pointer mb-2">Hydrogen VS Electric Cars</h4>
<p className="text-Grayish-blue font-light text-sm">Will hydrogen-fueled cars ever catch up to EVs?</p>
</div>
<hr className="line my-3 lg:my-0" />
{/* two */}
<div className="flex flex-col">
<h4 className="text text-Off-white hover:text-Soft-orange cursor-pointer mb-2">The Downsides of AI Artistry</h4>
<p className="text-Grayish-blue font-light text-sm">What are the possible adverse effects of on-demand AI image generation?</p>
</div>
{/* three */}
<hr className="line my-3 lg:my-0" /
.
.
.
2: When you need to handle onClick event create a function with name handleOnClick. Do inside whatever you want to and then pass this function to button onClick. And also you repeat the same function several times in your code.
onClick={() => { setNav(!nav); closeNavOnLargeScreen() }}
onClick={() => { setNav(!nav); closeNavOnLargeScreen() }}
onClick={() => { setNav(!nav); closeNavOnLargeScreen() }}
3: Create Component for this part
return (
<div key={id} className="flex flex-row gap-5">
<img src={icon} alt={alt} loading="lazy" className="h-[150px]" />
<div className="flex flex-col gap-2 mt-2">
<h1 className="text-3xl font-bold text-Grayish-blue">{number}</h1>
<h3 className="text-Very-dark-blue font-semibold hover:text-Soft-red cursor-pointer lg:text-sm">{head}</h3>
<p className="text-sm lg:text-xs font-light text-Dark-grayish-blue">{body}</p>
</div>
</div>
)
Feel free to ask if you have questions.
Marked as helpful
