import React from 'react'
import preload from '../public/data.json'
import ShowCard from './ShowCard'

const Search = React.createClass({
  getInitialState () {
    return {
      searchTerm: ''
    }
  },
  handleSearchTermChange (event) {
    this.setState({searchTerm: event.target.value})
  },
  render () {
    return (
      <div className='search'>
        <header>
          <h1>bizzy bear's video emporium</h1>
          <input onChange={this.handleSearchTermChange} value={this.state.searchTerm} type='text' placeholder='search' />
        </header>
        <div>
          {preload.shows.map((show) => {
            return (
              <ShowCard key={show.imdbID} {...show} />
            )
          })}
        </div>
      </div>
    )
  }
})

export default Search

@@ -591,16 +591,197 @@
 ad.shows
+%0A            .filter((show) =%3E %7B%0A              return %60$%7Bshow.title%7D $%7Bshow.description%7D%60.toUpperCase().indexOf(this.state.searchTerm.toUpperCase()) %3E= 0%0A            %7D)%0A            
 .map((sh
@@ -797,24 +797,26 @@
             
+  
 return (%0A   
@@ -808,24 +808,26 @@
    return (%0A
+  
             
@@ -881,18 +881,22 @@
         
-)%0A
+  )%0A  
         

Add filter for search input.