Geek Culture
Published in

Geek Culture

Create a Simple Search Component in React.js using React Hooks

A simple tutorial on building a dynamic search component in React with the use of hooks

Photo by Arnold Francisca on Unsplash

Setting up the Project

Pre-requisites

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

Creating a React App

npx create-react-app react-search
cd react-search
yarn add tachyons

Clearing the Clutter and Setting up App (optional)

  1. App.test
  2. App.css
  3. index.css
  4. logo.svg
  5. serviceWorker.js
  6. setupTests.js
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"/><title>React Search</title>
index.js
App.js

Creating Data File

initialDetails.js

Starting with the Project

1. Card.js        // Card component to display details
2. SearchList.js // Component to list out the cards
3. Scroll.js // Component for making the list scrollable
4. Search.js // Main search component

Card.js

Card.js

SearchList.js

SearchList.js

Scroll.js

Scroll.js

Search.js

Search.js

App.js

A clean App.js usually means a well created web app.

App.js

Running our Web App

yarn start

Demo

Demo for React-Search Web App

Additional Section: Hiding the SearchList Component until invoked

const [searchShow, setSearchShow] = useState(false);
if(e.target.value===""){
setSearchShow(false);
}
else {
setSearchShow(true);
}
if (searchShow) {};
Search.js

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store