Clicking on a checkbox doesn't update the checked property


I’ve been staring at this code for hours and I just don’t know why it’s not working. If I go into the mongo shell and manually update one it works but clicking on it does nothing. Also the remove method works when clicking the button so I know the selector is working. I looked in the react developer console and I notice the checkbox doesn’t have a ‘checked’ property at all so I’m assuming this is part of the problem. Any help is welcomed

Also, this is straight from the meteor/react tutorial except I’m using semantic-ui for styling.

export default class Task extends Component {
toggleChecked() {
Tasks.update(this.props.task._id, { $set: { checked: !this.props.task.checked } });

deleteThisTask() {

render() {
	const taskClassName = this.props.task.checked ? 'ui fitted checkbox active' : 'ui fitted checkbox';

	return (
		<div className="card">
			<div className="content">
				<div className="header">{this.props.task.text}</div>
				<div className="description">{this.props.task.description}</div>
			<div className="extra content">

				<div className="ui left floated compact segment">
					<div className={taskClassName}>
				<div className="right floated remove">
					<button className="ui icon button" onClick={this.deleteThisTask.bind(this)}>
						<i className="remove icon"></i>



Can’t figure out how to delete this but this is not even an issue. Turns out the the styling from semantic-ui was messing with the checkbox so when you click the checkbox, you’re not actually clicking the checkbox; you’re clicking about 3px to the right.