Of course the first function can be further broken down. Therefore in the new handleHomeLogoClick function, I call two functions to take care of each of them: 1. I group the first two things together since there is a logic connection between them, while changing the background is a totally separate issue. For example, the original handleClick does several things: it fetches featured businesses from the backend, saves them in the local state, and changes the background of HomeHero. The Home component does not have to know SearchBar or HomeBarContainer, let HomeHero take care of those.īreak down the function: only one level of abstraction per function.
However, I can pass those information to the children as props, and this greatly cleans up the render method. Initially I only created Categories component since it’s static, while HomeHero has a handleClick callback, and FeaturedBusinesses has some extra logic.
The render method returns the three subcomponents: HomeHero, FeaturedBusinesses, and Categories. Here’s what I did to make the code cleaner:īreak down the component: only one level of abstraction per component.
0 kommentar(er)
