Implementing a Custom Search Bar with React
So you want to make a search bar in React using hooks? Great!
I’ll be building a search bar with one of the most popular web application frameworks, React. Search bar features are a useful graphical widget common to user interface development. Click here to download the full code and check out the Live Demo. I am not covering the CSS file. Please download the CSS file here.
Before we start
To install the base project, run the following command in your terminal:
npx create-react-app wonders
Then open the wonders folder in VS Code. Create a folder as shown in the left image with references. The three main components needed for the seach bar are Header, People, and Search.
Gec.js file represents the API file, including People information like name, mobile, email, and other information. Click here to download the Gec.js file.
Step-1: Create Wonders.js file
In this file, We fetch the data from the Gec.js file, set the item, and set loading as false.
Code explanation:
The async function fetchData() is used to fetch data with res.json(). useEffect is used for calling fetchData(). Container div includes the Header and Search component with isLoading props and item props.
Step-2: Create Search Component
Seach Component contains the Seach logic which matches the input text to API text.
Code Explanation:
The handleChange() function is for fetching the input text from the input field. Fetch the input text with React hooks and match the data with the API data. The filter is set to the result data with the input text. The _data. map method maps the People component with unique key props and items with the key.
Step-3: Create People Component
The People component contains information related to the People with their Image and all other relevant information.
Code Explanation:
People.js contains item props from the previous component. In this component, the main HTML content displays the people's card with his information like mobile, email, etc.
Step-4: Create Header Component
The header component covered the logo of 7 wonders.
Code Explanation:
For the header element, we add img tag with the src logo. This logo has been imported from the img folder with the wonders.jpg file.
Finally after making this file, give reference wonders.js file to the App.js file and import it in the App.js file.
Click here to download the full code and check out the Live Demo.
That’s it! Hopefully, this article is of use to you.
More content at plainenglish.io
