DEV Community

Cover image for Search Component in React
Chetan Rohilla
Chetan Rohilla

Posted on • Originally published at readymadecode.com

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;
Enter fullscreen mode Exit fullscreen mode

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://readymadecode.com/'},
        { name: 'Laravel', url: 'http://readymadecode.com/'}
    ];

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

}

export default HomePage;
Enter fullscreen mode Exit fullscreen mode

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:)

Discussion (1)

Collapse
adam_cyclones profile image
Adam Crockett

14, good job keep going!