React Input Validation

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-with-addons.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
 <div class="container-fluid" id="main">
  <div class="row">
    <div class="col-xs-12">
      <div id="root"></div>
    </div>
  </div>
</div>

CSS

#main{margin-top: 20px}
.search{margin-bottom: 20px}

Babel + JSX

var phones = [
  {
    'name': 'Nexus S',
    'snippet': 'Fast just got faster with Nexus S.'
  },
  {
    'name': 'Motorola XOOM with Wi-Fi',
    'snippet': 'The Next, Next Generation tablet.'
  },
  {
    'name': 'MOTOROLA XOOM',
    'snippet': 'The Next, Next Generation tablet.'
  }
];

const PhoneList = (props) => {
  return(
    <ul className='list-group'>{
      props.phones.map((d, i) => {return(
        <li className='list-group-item' key={i}>
          <b>{d.name}</b><br/>
          <small>{d.snippet}</small>
        </li>
      )})
    }</ul>
  )
}

const Search = (props) => {
  return(
    <div className="search">
      <h4>Search</h4>
      <input type="search" className="form-control"
        onChange={props.handleChange}
        onKeyDown={}
      />
    </div>
  )
}

let App = React.createClass({
  getInitialState(){
    return {phones: phones}
  },
  handleChange(e){
    let phonesInView = phones.filter((d) => {
      return d.name.indexOf(e.target.value) >= 0
    })
    this.setState({phones: phonesInView})
  },
  render(){
    return(
      <div>
        <Search handleChange={this.handleChange}/>
        <PhoneList phones={this.state.phones} />
      </div>
    )
  }
})

ReactDOM.render(
  <App />,
  document.getElementById("root")
)