import React, { PropTypes } from 'react'

class Todo extends React.Component {
  static propTypes = {
    todo: PropTypes.any.isRequired,
    deleteButtonVisible: PropTypes.bool,
    onCompleted: PropTypes.func.isRequired,
    onDelete: PropTypes.func.isRequired,
    onDeleteButtonVisibilityChanged: PropTypes.func.isRequired
  };

  render () {
    const textStyle = this.props.todo.completed ? {'textDecoration': 'line-through'} : {}
    let deleteButtonClassName = 'delete-button close'
    if (!this.props.deleteButtonVisible) {
      deleteButtonClassName += ' delete-button-hidden'
    }
    return (
      <tr className='todo'
            onMouseEnter={this.props.onDeleteButtonVisibilityChanged.bind(this, this.props.todo)}
            onMouseLeave={this.props.onDeleteButtonVisibilityChanged.bind(this, undefined)}
        >
        <td>
          <input type='checkbox' checked={this.props.todo.completed ? 'checked' : ''} onChange={() => { this.props.onCompleted(this.props.todo) } } />
        </td>
        <td>
          <span style={textStyle}>
            {this.props.todo.text}
          </span>
        </td>
        <td>
          <button type='button' className={deleteButtonClassName} aria-label='Close' onClick={this.props.onDelete.bind(this, this.props.todo)}>
            <span aria-hidden='true'>&times;</span>
          </button>
        </td>
      </tr>
    )
  }
}

export default Todo

@@ -9,23 +9,8 @@
 eact
-, %7B PropTypes %7D
  fro
@@ -25,314 +25,111 @@
 '%0A%0Ac
-lass Todo extends React.Component %7B%0A  static propTypes = %7B%0A    todo: PropTypes.any.isRequired,%0A    deleteButtonVisible: PropTypes.bool,%0A    onCompleted: PropTypes.func.isRequired,%0A    onDelete: PropTypes.func.isRequired,%0A    onDeleteButtonVisibilityChanged: PropTypes.func.isRequired%0A  %7D;%0A%0A  render ()
+onst Todo = (%7Btodo, deleteButtonVisible, onCompleted, onDelete, onDeleteButtonVisibilityChanged%7D) =%3E
  %7B%0A
-  
   co
@@ -144,27 +144,16 @@
 Style = 
-this.props.
 todo.com
@@ -201,18 +201,16 @@
 '%7D : %7B%7D%0A
-  
   let de
@@ -257,28 +257,15 @@
 se'%0A
-  
   if (!
-this.props.
 dele
@@ -283,18 +283,16 @@
 ible) %7B%0A
-  
     dele
@@ -342,14 +342,10 @@
 '%0A  
- 
- 
 %7D%0A
-  
   re
@@ -351,18 +351,16 @@
 eturn (%0A
-  
     %3Ctr 
@@ -382,26 +382,24 @@
 '%0A          
- 
- 
 onMouseEnter
@@ -400,27 +400,16 @@
 eEnter=%7B
-this.props.
 onDelete
@@ -439,35 +439,24 @@
 .bind(this, 
-this.props.
 todo)%7D%0A     
@@ -456,26 +456,24 @@
 %7D%0A          
- 
- 
 onMouseLeave
@@ -474,27 +474,16 @@
 eLeave=%7B
-this.props.
 onDelete
@@ -539,14 +539,10 @@
     
- 
- 
 %3E%0A
-  
     
@@ -540,34 +540,32 @@
    %3E%0A      %3Ctd%3E%0A
-  
         %3Cinput t
@@ -588,27 +588,16 @@
 hecked=%7B
-this.props.
 todo.com
@@ -639,27 +639,16 @@
 () =%3E %7B 
-this.props.
 onComple
@@ -651,27 +651,16 @@
 mpleted(
-this.props.
 todo) %7D 
@@ -662,34 +662,32 @@
 o) %7D %7D /%3E%0A      
- 
- 
 %3C/td%3E%0A        %3Ct
@@ -678,33 +678,29 @@
 %3C/td%3E%0A      
-  
 %3Ctd%3E%0A
-  
         %3Cspa
@@ -734,22 +734,9 @@
     
-  %7Bthis.props.
+%7B
 todo
@@ -750,18 +750,16 @@
         
- 
- 
 %3C/span%3E%0A
@@ -756,34 +756,32 @@
   %3C/span%3E%0A      
-  
 %3C/td%3E%0A        %3Ct
@@ -772,33 +772,29 @@
 %3C/td%3E%0A      
- 
- 
 %3Ctd%3E%0A
-  
         %3Cbut
@@ -873,27 +873,16 @@
 nClick=%7B
-this.props.
 onDelete
@@ -897,27 +897,16 @@
 is, 
-this.props.
 todo)%7D%3E%0A
     
@@ -901,18 +901,16 @@
 todo)%7D%3E%0A
-  
         
@@ -959,18 +959,16 @@
         
-  
 %3C/button
@@ -971,34 +971,30 @@
 tton%3E%0A      
-  
 %3C/td%3E%0A
-  
     %3C/tr%3E%0A  
@@ -997,15 +997,9 @@
 %3E%0A  
-  )%0A  %7D
+)
 %0A%7D%0A%0A

Refactor Todo into a function