# How I built my first search component in React

DevFeed: [How I built my first search component in React](<https://devfeed.tech/articles/how-i-built-my-first-search-component-in-react-20014.md>)

Original publisher: [Read original article](<http://engineering.hackerearth.com/2020/07/17/how-i-built-my-first-search-component/>)

Published: 2020-07-17T00:00:00Z

Content type: tutorial

Language: en

Sources: [HackerEarth](<https://devfeed.tech/sources/hackerearth.md>)

Topics: [React](<https://devfeed.tech/topics/react.md>), [Redux](<https://devfeed.tech/topics/redux.md>), [Development](<https://devfeed.tech/topics/development.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>)

Tags: [architecture](<https://devfeed.tech/tags/architecture.md>), [caching](<https://devfeed.tech/tags/caching.md>), [code](<https://devfeed.tech/tags/code.md>), [components](<https://devfeed.tech/tags/components.md>), [modal](<https://devfeed.tech/tags/modal.md>), [module](<https://devfeed.tech/tags/module.md>), [react](<https://devfeed.tech/tags/react.md>), [redux](<https://devfeed.tech/tags/redux.md>), [render](<https://devfeed.tech/tags/render.md>), [search](<https://devfeed.tech/tags/search.md>), [server](<https://devfeed.tech/tags/server.md>)

## AI overview

A developer explains how they built a React search component for a donation platform. The component displays search results in a modal, uses Redux actions, reducers, and a store to manage state, and relies on a service layer for server requests, caching, and error handling.

## Source excerpt

In 2016, I was working to build a platform to help NGOs raise donations. The platform was supposed to be built using React. The beautiful designs were in place. I was excited to build some new features as well as to try out the new architecture using Redux on a larger scale. Yes, this was the time when Redux was fairly new. React still had PropTypes package attached to its core. The lifecycle method componentWillReceiveProps used to dominate the scene. Out of the many design components that I worked while building that platform, I am going to discuss my first search component in React here. Elements of a search bar The search bar was a simple input field placed at the middle of the main header. The design idea was to have a search component which displays results as soon as the user inputs something in it. Then, to provide a simple cross icon at the right end of the input field to clear the inputs and hide the search results. The search results were supposed to appear inside a modal starting below the main header of the site. Below are the designs to help you visualise things better: If you typed on the search bar, a search results component appeared and showed NGOs, Live Projects and Campaigns. Development Redux Architecture While building apps using Redux architecture, one should be cognizant of its three principles (Single source of truth, State is read-only and Changes are made with pure functions). In computer programming, a pure function is a function that has the following properties: Its return value is the same for the same arguments Its evaluation has no side effects In our case, a single module (file) was created to include action types, reducers and action creators. The flow was - when the user inputs something in the search field, we will take that value and pass it through an action creator which will fetch the results from the server for the queried string and return an action type along with the result. There was also a service layer in the middle, w