How to create search bar in react js?
March 31, 2023Hi Friends 👋,
Welcome To aGuideHub!
To create a search bar in React js, you have to use the javascript filter method with the input search bar. It will create a search bar in react js.
Today, I am going to show you, how to create search bar in react js.
Table of contents
- Set up the React project.
- Import necessary components.
- Create search bar component.
Let’s start with the first step.
Step 1: Set up the React project.
First you have to install the React project. You should use create-react-app command to create a new React project.
npx create-react-app my-app
cd my-app
npm startStep 2: Import necessary components.
You have to import the react component, which you can use in your React component. and import styles.css, "@mui/material/TextField", "./Components/List".
import { React, useState } from "react";
import TextField from "@mui/material/TextField";
import List from "./Components/List";
import "./styles.css";Step 3: Create the search bar component.
To create search bar.The textfield component is shown to be used to render the search bar. It has an id of "outlined-basic", an onchange function named inputHandler, and some additional props to specify the style and label.
<div className="main">
<h1>React Search</h1>
<div className="search">
<TextField
id="outlined-basic"
onChange={inputHandler}
variant="outlined"
fullWidth
label="Search"
/>
</div>
<List input={inputText} />
</div>ReactJS create search bar example.
The below code is an example of, We have imported material ui in it, and have created a component file in which "List.js" and "ListData.json" have been kept and also use style css.
App.js
import { React, useState } from "react";
import TextField from "@mui/material/TextField";
import List from "./Components/List";
import "./styles.css";
function App() {
const [inputText, setInputText] = useState("");
let inputHandler = (e) => {
//convert input text to lower case
var lowerCase = e.target.value.toLowerCase();
setInputText(lowerCase);
};
return (
<div className="main">
<h1>React Search</h1>
<div className="search">
<TextField
id="outlined-basic"
onChange={inputHandler}
variant="outlined"
fullWidth
label="Search"
/>
</div>
<List input={inputText} />
</div>
);
}
export default App;.main {
display: flex;
height: 100vh;
width: 100%;
align-items: center;
flex-direction: column;
row-gap: 20px;
}
h1 {
margin: 10px;
font-size: 40px;
color: rgb(1, 1, 59);
}
.search {
width: 30%;
}
ul li {
font-size: 20px;
}component file
"./ListData.json"
[
{
"id": 1,
"text": "Devpulse"
},
{
"id": 2,
"text": "Linklinks"
},
{
"id": 3,
"text": "Centizu"
},
{
"id": 4,
"text": "Dynabox"
},
{
"id": 5,
"text": "Avaveo"
},
{
"id": 6,
"text": "Demivee"
},
{
"id": 7,
"text": "Jayo"
},
{
"id": 8,
"text": "Blognation"
},
{
"id": 9,
"text": "Podcat"
},
{
"id": 10,
"text": "Layo"
}
]"Components/List"
import { React, useState } from "react";
import data from "./ListData.json";
function List(props) {
const filteredData = data.filter((el) => {
if (props.input === "") {
return el;
} else {
return el.text.toLowerCase().includes(props.input);
}
});
return (
<ul>
{filteredData.map((item) => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}
export default List;Check the output of the above code example.
Here, we are provided code sandbox links for the above program create search bar in React js. Then you can use whenever you went and do the changes as per your requirements.
All the best 👍
