search.js

import React, { Component, PropTypes } from 'react'

export default class Search extends Component {
  static propTypes = {
    onChange: PropTypes.func
  }

  constructor (props) {
    super(props)
  }

  searchQuery = () => {
    this.props.onChange(this.refs.search.value)
  }

  render () {
    return (
      <div className='search-container'>
        <label htmlFor='search'>Search:</label>
        <input type='text' ref='search' id='search' className='small' onChange={this.searchQuery} />
      </div>
    )
  }
}

unicorns.js

import React, { Component, PropTypes } from 'react'
import { orderData } from '../helpers/data-helpers'
import Search from '../components/search'

var data = [
  { image: 'http://41.media.tumblr.com/30b1b0d0a42bca3759610242a1ff0348/tumblr_nnjxy1GQAA1tpo3v2o1_540.jpg', name: 'The majestic unicorn', rating: 2 },
  { image: 'https://github.com/images/error/angry_unicorn.png', name: 'Darth Unicorn', rating: 4 },
  { image: 'http://www.mookychick.co.uk/wp-content/uploads/2014/09/wrong-unicorn-7.png', name: 'Like a boss', rating: 14 },
  { image: 'http://i42.tinypic.com/2ce0t3t.png', name: 'Charlie', rating: 8 }
]

export class Unicorns extends Component {
  static propTypes = {
    records: PropTypes.array,
    filter: PropTypes.string
  }

  static defaultProps = {
    records: [],
    filter: ''
  }

  constructor (props) {
    super(props)
  }

  setFilter = (query) => {
    this.setState({ filter: query })
  }

  createRecord = () => {
    var newRecord = {
      image: this.refs.url.value,
      name: this.refs.name.value,
      rating: 0
    }

    this.refs.url.value = ''
    this.refs.name.value = ''

    this.saveNewRecord(newRecord)
  }

  saveNewRecord = (record) => {
    let records = this.state.records
    records.push(record)
    this.setState(records)
  }

  showUnicorn = () => {
    var unicorn = document.querySelector('.bonus-unicorn')
    unicorn.className += ' flying'

    setTimeout(function() {
      unicorn.classList.remove('flying')
    }, 2000)
  }

  renderList () {
    let items = orderData(this.state.records)
    
    return (
      <div className='list'>
        {items.map(function (item, i) {
          if (item.name.toLowerCase().indexOf(state)) {
            return
          } else {
            return (
              <div className='row' key={i}>
                <div className='row-image'>
                  <img src={ item.image } />
                </div>
                <div className='row-name'>
                  <strong>Name:</strong>
                  { item.name }
                </div>
                <div className='row-rating'>
                  <strong>Rating:</strong>
                  { item.rating }
                </div>
              </div>
            )
          }
        })}
      </div>
    )
  }

  render () {


    return (
      <div className="container">
        <div>
          <Search onChange={this.setFilter} />
          this.renderList(items)
          <div>
            <div className='new-record-form'>
              <h4>Add a new unicorn</h4>
              <label htmlFor='url'>Image URL:</label>
              <input type='text' ref='url' id='url' className='small' />
              <label htmlFor='name'>Name:</label>
              <input type='text' ref='name' id='name' className='small' />
              <button type='button' onClick={this.createRecord}>Add</button>
            </div>
          </div>
        </div>
        <button type='button' className='general-button' onClick={this.showUnicorn}>Show me a unicorn!</button>
        <div className='bonus-unicorn'></div>
      </div>
    )
  }
}