ContactApp.js

import React, { Component } from 'react';
import {render} from 'react-dom';

class SearchBox extends Component {
  render(){
    return (
      <input type="search"
             value={this.props.value}
             onChange={this.props.onSearch.bind(this)}/>

    )
  }
}

class ContactList extends Component {
  render(){
    return (
      <ul>
        {this.props.contact.map(contact => <li>{contact.name}</li>)}
      </ul>
    )
  }
}

class App extends Component {
  constructor(){
    super();
    this.state={
      searchValue: ''
    }
  }

  handleSearch(event){
    this.setState({
      searchValue: event.target.value
    })
  }
  render(){
    let filteredContacts = this.props.contacts.filter(contact => {
      return contact.name.indexOf(this.state.searchValue) !== -1
    })

    return (
      <div>
        <SearchBox value={this.state.searchValue}
                   onSearch={this.handleSearch.bind(this)}  />
        <ContactList contact={filteredContacts} />
      </div>
    );
  }
}


let contacts = [
  { name: "Cassio Zen", email: "cassiozen@gmail.com" },
  { name: "Dan Abramov", email: "gaearon@somewhere.com" },
  { name: "Pete Hunt", email: "floydophone@somewhere.com" },
  { name: "Paul O’Shannessy", email: "zpao@somewhere.com" },
  { name: "Ryan Florence", email: "rpflorence@somewhere.com" },
  { name: "Sebastian Markbage", email: "sebmarkbage@here.com" },
]


render(<App contacts={contacts} />, document.getElementById('root'));