DEV Community

Cover image for Search Component in React
Chetan Rohilla
Chetan Rohilla

Posted on • Edited on • Originally published at w3courses.org

10 3

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

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

💡 One last tip before you go

DEV++

Spend less on your side projects

We have created a membership program that helps cap your costs so you can build and experiment for less. And we currently have early-bird pricing which makes it an even better value! 🐥

Check out DEV++

Top comments (1)

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

14, good job keep going!

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay