Search Component 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 component 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: 'http://w3courses.org/'},
        { name: 'Laravel', url: 'http://w3courses.org/'}
    ];

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

}

export default HomePage;

You can also apply some CSS to to beautify style or icons.

---

Please like share subscribe and give positive feedback to motivate me to write more for you.

For more tutorials please visit my website.

Thanks:)
Happy Coding:)

Comments

[Adam Crockett 🌀]

14, good job keep going!