import React from 'react';

export default class Todo extends React.Component {
  static propTypes = {
    text: React.PropTypes.string.isRequired
  }

  render() {
    return (
      <li>{this.props.text}</li>
    );
  }
}

import React from 'react';

export default class Todo extends React.Component {
  static propTypes = {
    text: React.PropTypes.string.isRequired
  }

  state = {
    completed: false
  }

  render() {
    const style = {
      textDecoration: this.state.completed ? 'line-through' : undefined,
      cursor: 'default'
    };

    return (
      <li
        style={style}
        onClick={this.toggleCompleted}
      >
        {this.props.text}
      </li>
    );
  }

  toggleCompleted = (event) => {
    this.setState({ completed: !this.state.completed });
  }
}

Add the ability to cross off items on the list
Add the ability to cross off items on the list
