Skip to content
Permalink
Browse files

Step 5 of TODO App with React tutorial - adding UI for checking off a…

…nd deleting TODO items
  • Loading branch information
itamaro committed Nov 28, 2015
1 parent 898c290 commit ac69d1b607993c525bccf29c13e31dc97435061c
Showing with 29 additions and 1 deletion.
  1. +29 −1 Task.jsx
@@ -5,9 +5,37 @@ Task = React.createClass({
// We can use propTypes to indicate it is required
task: React.PropTypes.object.isRequired
},

toggleChecked() {
// Set the checked property to the opposite of its current value
Tasks.update(this.props.task._id, {
$set: {checked: ! this.props.task.checked}
});
},

deleteThisTask() {
Tasks.remove(this.props.task._id);
},

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" : "";

return (
<li>{this.props.task.text}</li>
<li className={taskClassName}>
<button className="delete" onClick={this.deleteThisTask}>
&times;
</button>

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

<span className="text">{this.props.task.text}</span>
</li>
);
}
});

0 comments on commit ac69d1b

Please sign in to comment.
You can’t perform that action at this time.