React: Search Component Design
How to design a React component that will allow users to search for content (in our example: meme).
Intro
In this blog, we will focus on designing a React component that will allow users to search for a meme. This involves fetching data from an API, presenting it to the user in a masonry layout, and then filtering the fetched data based on user search. Later, we could add logic to share the search results with others.
The approach is broken down into UI design, component diagram, code details, and feature enhancement.
Note: To keep our focus on the core business logic, I have not included props design, js doc, internationalization, accessibility, etc.
Functional Requirments
- Users should be able to see all the available memes.
- Users should be able to search a meme by title.
- Users should be able to search memes containing interested text.
- Users should be able to see changes in the search result upon update/edit to search text.
- (Bonus) Users should be able to pin/unpin interested memes while searching.
Component Diagram
In this section, we will focus on building a hierarchy of components to understand the task delegation and data communications between them.
Code Design
Search Component :
We will build a Search component that does most of the heavy lifting for us. Hence memes are available via an external API, we will make use of useEffect hook to make asynchronous API calls once the DOM is mounted.
Learning points💡: making use of useEffect for the external API calls, applying the array filter method.
Instead of updating the render function directly from the state, we will filter the fetched data for user-searched text/string and then update the render function. This allows us to retain the original state when the user deletes/removes the character or sub-string from the searched text/string.
Search Item Component :
SearchItem component’s focus is to render a meme. It is still the responsibility of the Search component to call the SearchItem on filtered data. By doing so fetched data funneled through state update, filter logic, and then to visual changes (i.e., search item).
Great, our search example works great except we cannot share the URL with the search query. Without this feature, users will always have to re-type the search text to find the results.
Search Component with Improvement :
In this section, we will enhance the search component to make use of useSearchParams hooks, but first, we need to wrap our main component ( i.e SearchExample ) with BrowserRouter and define some Routes. Please refer to react-router documentation for more details on using react-router-dom.
Learning points💡: making use of react-router-dom, useSearchParam hook for updating browser URL with query strings.
We begin defining a route (search component will load at the root ) and then we add useSearchParams hooks to our search component so that we update the URL with user-typed search text/string.
Please check codesandbox for complete code
Search Demo :
React App
search example app built using functional components, hooks, and react-router
mh426q.csb.app
Bonus: Adding feature to allow users to pin/select interested items/memes while searching. i.e single click will pin the item and double-click will unpin the selected item/meme.
Search Component with More Improvement :
In this part of the section, we will enhance our code so that users should be able to pin/unpin by clicking and double-clicking the items while searching. This enables users not to lose items they were interested in while searching. Most of the logic resides in the search component with minor updates in the search item component and CSS.
💡: making use of event for clicks, merging two arrays, passing callback functions
And searchItem component:
Please check codesandbox for complete code
Advanced Search Demo:
Now our app is complete with most of the features we decided on at the beginning of the design phase, but we can keep adding new enhancements like infinite scroll, loading placeholders, etc. but I am going to leave that up to you to play around.
My previous three blogs:
1. React | Node: Why should we care about dependencies?
More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Check out our Community Discord and join our Talent Collective.
