Create Search Bar in React

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.