Create a Simple Search Component in React.js using React Hooks
By: Shashank Singh
Tags: Search, React Hook, Web Development, React

Setting up the Project

Pre-requisites

Node.js installed on your system create-react-app package installed Preferably, an IDE Will to work on a Search component

Creating a React App

Firstly, we’ll create a React App with the help of the create-react-app package, so we run the following commands:

npx create-react-app react-search

cd react-search

After this, we’d also want tachyons (use of tachyons is not necessary though if you don’t want to style the component here), so we add it using yarn with following commands:

yarn add tachyons

Now, you’re ready to start working on your React App.

Clearing the Clutter and Setting up App (optional)

So, now that you have created your app, open your working folder in your IDE and you see a lot of files are already there, but for the scope of this project (and usually all small-scale projects), we can remove a lot of these files and make your folder look a bit better. So, remove these files in your project’s src folder:

App.test App.css index.css logo.svg serviceWorker.js setupTests.js

This will clear up your src folder where all of your work is going to be done.

Now, open your public folder and go to index.html , in the file, change the title of your App to React Search (or anything that you like), i.e., replace <title>React App</title> with <title>React Search</title> and add the following line above it to use tachyons in your app:

<link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"/> <title>React Search</title>

The version of the tachyons might change in the above link, you can copy the newest command from here.

Now, open your App.js and index.js files in the src folder and remove the unnecessary lines, after which they shall look like this ( React.StrictMode is optional though):

index.js

App.js

But do note that this is an optional step and you can leave whole of this step if you are not trying to create an app from scratch.

Creating Data File

There are two ways to go about here and it totally depends on you how you want your app to work.

The first one is to add the data with the useState hook in the App.js file itself. This may be a good way to go if we create a form for getting the data from the user (otherwise there will be too much clutter inside App.js ), but for the sake of simplicity of this article, we’ll be opting for the other way.

The second way is to create a different file and then import it inside the App.js file and hence getting a clean look.

So, we start with creating a data folder inside the src folder, in this folder we create a file named initialDetails.js . Now, this file will contain a list, which in turn contains details.

We use 5 main details, id, imgPath, name, email, address for a person. For the images, I used the 8-bit avatar illustrations from Limitless Designs, you can also get it from here for free (may have to sign up). Then, I created a folder named img inside the assets folder in the public folder and pasted five random pictures in the img folder, naming them 1–5 with their given format.

The imgPath variable for any given person would be a relative address from the public folder (we’ll see later how to use this imgPath as React doesn’t allow for use of any items outside the src folder).

Since it is a menial task to create data here, I’d ask you to just copy paste the code given below in your files and make the necessary changes if required.

initialDetails.js

After completing this part, we can finally move on to creating the actual app in React.