meteor__simple-todos-react/Task.jsx

// Task component: represents a single todo item.

Task = React.createClass({
  propTypes: {
    // We can use propTypes to indicate it is required.
    task: React.PropTypes.object.isRequired,
    showPrivateButton: React.PropTypes.bool.isRequired
  },

  toggleChecked() {
    // Set the checked property to the opposite of its current value.
    Meteor.call("setChecked", this.props.task._id, ! this.props.task.checked);
  },

  deleteThisTask() {
    Meteor.call("removeTask", this.props.task._id);
  },

  togglePrivate() {
    Meteor._debug('Toggling private on task', this.props.task._id);
    Meteor.call("setPrivate", this.props.task._id, ! this.props.task.private);
  },

  render() {
    // Give tasks a different clasSName when they are checked off,
    // so that we can style them nicely in CSS.
    const taskClassName = (this.props.task.checked ? 'checked' : '') + " " +
      (this.props.task.private ? "private" : "");

    let result = (
      <li className={taskClassName}>
        <button className="delete" onClick={this.deleteThisTask}>
          &times;
          </button>

        <input
          type="checkbox"
          readOnly="{true}"
          checked={this.props.task.checked}
          onClick={this.toggleChecked}
        />

        { this.props.showPrivateButton ? (
            <button className="toogle-private" onClick={this.togglePrivate}>
              {this.props.task.private ? "Private" : "Public"}
            </button>
          ) : '' }
        <strong>{this.props.task.username}</strong>: <span className="text">{this.props.task.text}</span>
      </li>
    );
    return result;
  }
});