React Search

index.html

<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>

react-search.markdown

React Search

A Pen by Dorothea on CodePen.

License.

script.babel

class Search extends React.Component {
  constructor(props) {
    super(props);
    this.allItems = [{text: 'Hallo'}, {text:'Lola'}, {text:'Bu'}, {text:'bah'}, {text:'beh'}]
    this.state = { filteredItems: this.allItems  };
    this.filterItems = this.filterItems.bind(this);
  }
  
  filterItems(e) {
    let queryText = e.target.value
    if (queryText === '') {
      this.setState({filteredItems: this.allItems});
    } else {
      this.setState({filteredItems: this.allItems.filter(item => item.text.startsWith(queryText))});
    }
    
  }
  
  render() {
    return (
      <div>
        <h3> Search </h3>
        <input onChange={this.filterItems}/>
        <ResultList items={this.state.filteredItems}/>
     </div>
    )
  }
}

class ResultList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}
  }
  
  render() {
    return (
      <ul>
        { this.props.items.map(item => (<li> { item.text } </li>)) }
      </ul>
    )
  }
}

ReactDOM.render(
  <Search />,
  document.getElementById('root')
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>