checkbox.js.jsx.coffee

@TodoList = React.createClass
  render: ->
    `<ul>
      {this.props.todos.map(
         function(todo, index){
           return (<TodoItem key={index} id={todo.id} description={todo.description} completed_at={todo.completed_at} />)
         }, this)
       }
    </ul>`

@TodoItem = React.createClass
  getInitialState: ->
    {completed: this.props.completed_at?}

  handleChange: ->
    $.ajax(
      method: "PATCH"
      url: "/todos/#{this.props.id}/complete"
      success: =>
        this.setState completed: !this.state.completed
    )

  render: ->
    `<li>
      <label>
        <input type="checkbox" checked={this.state.completed} onChange={this.handleChange} />{this.props.description}
      </label>
    </li>`