React에서 구성 요소 검색

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;

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;