Create Search Bar in React

React Native, ReactJS

Search Bar is a text-box used to search data in file or database based on user’s input. In our web or mobile applications we can create search bar in react in different ways. Here below we will create react search component in class component.

Create Search Bar in React

class SearchComponent extends React.Component {

   state = { searchString: '' }
   
   handleChange = (e) => {
     this.setState({ searchString:e.target.value });
   }

   render() {
     
     var searchItems = this.props.items,
         searchString = this.state.searchString.trim().toLowerCase();
     
     if (searchString.length > 0) {
       searchItems = searchItems.filter(function(i) {
         return i.name.toLowerCase().match( searchString );
       });
     }

     return (
       <div>
          <input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="Type here..."/>
          <ul>
            {searchItems.map(function(i) {
                return <li>{i.name} <a href={i.url}>{i.url}</a></li>;
            }) } 
          </ul>
       </div>
     );
   }
}

export default SearchComponent;

Now, we have an <SearchComponent /> which we can use in our class or functional component and items is an prop for this component. For example, we are using <SearchComponent /> in the component below.

import {SearchComponent} from './search-component';

class HomePage extends React.Component {

	render() {
     
	// Search Items this can be static or through API
	var searchItems = [
	    { name: 'AngularJS', url: 'https://angularjs.org/'},
	    { name: 'jQuery', url: 'https://jquery.com/'},
	    { name: 'React', url: 'https://facebook.github.io/react/'},
	    { name: 'Express', url: 'http://expressjs.com/'},
	    { name: 'PHP', url: 'https://readymadecode.com/'},
	  	{ name: 'Laravel', url: 'https://readymadecode.com/'}
	];

     return (
       <div>
          	// put input and display on page
			<SearchComponent items={searchItems} />
       </div>
     );
   }

}

export default HomePage;

You can apply some CSS to <SearchComponent /> to beautify style or icons.


Recommendation

Using MongoDB in Node.js

Create Barcode in React

Create QR Code in React

How to validate form in React

Create Tooltips in React

Create Progressbar in React

Using MongoDB with Laravel

Create Popup Component in React

How to create charts in ReactJS

Create Drag and Drop List in React

Basic Query In MongoDB

MultiSelect Components in React

Types of Storage For React

Card Components in React

For more React Tutorials Click hereNode.js Tutorials Click here.

If you like this, share this.

Follow us on FacebookTwitterTumblrLinkedInYouTube.

Comments are closed.