Practicing React Hooks using the TailwindCSS UI Take-Home Test
I recently read about the hiring process for TailwindCSS. Part of the process included a take-home test for candidates to complete over the space of two weeks.
Bored of building to-do apps and with a growing appreciation of Tailwinds class-based system, that allows you to style components without using any custom CSS, I decided to give it a try to practice some of what I’ve been learning with React Hooks.
In the article below, I mostly demonstrate how React Hooks can be used to manipulate state and implement the interactive functionality of the program (including styling changes).
Check out the project on GitHub. The live URL to my solution is here.
Building the Functionality for the Gallery
I broke down the different sections to decide on which parts needed to be interactive or reactive, examining the elements of the concept and seeing if they met the criteria listed in the docs. The image gallery would change data over time based on user input, so fit the criteria for using state.
More specifically, the URL for the featured image of the gallery would be updated using React Hooks to which ever thumbnail the user clicked.
The border for the active thumbnails was slightly trickier to implement as I wasn’t sure on what the design pattern would be. For example, if we just needed to add a border to the thumbnail that was clicked, and didn’t need it to toggle, the functionality would be a lot easier!
The solution I used was found by looking at tutorials on tabs components and involved creating a new state for active that would update to the clicked thumbnail (using the clickHandler function). The thumbnailSelect function would then compare the active thumbnail to the thumbnail index, using a ternary expression which, when it resolved true, resulted in using a border with a bolder outline.
Updating the Price Across Different Components
The other functionality that used React Hooks was for the product price, which would change in two places based on the user input of the form, including the product description component, and the footer. I created a state to manage the change for the price (ampPrice).
Initially, I decided to approach the solution by breaking down the form options into three separate groups and focused on updating the price based on the input from just one group as a test.
In addition to the state for ampPrice, I also created one for active(same as the thumbnails for the gallery), which would update to whichever form option was selected. I also created a state for the cost associated with the option (costState) that would be added to the price. The updatePrice function, combined the total cost of all the options, across all of the groups.
Reflection
I think whilst my solution for using React Hooks to build the gallery was reasonably robust, I would ideally like to organise the form groups into individual components to make them a little more reusable. Doing so, might involve updating the state from the child component that is two or three levels deep, which may take us into implementing redux in the program.
In general, though, I think React Hooks are an excellent way to build interactive web applications and React components work beatifully with Tailwind CSS. Having now used both React and Vue, I can honestly say that they are both viable options and think it’s good to have an awareness of both, as the trends are always changing.
Thank you for reading and please let me know in the comments if this article was helpful in any way.
