Clicking on a checkbox doesn't update the checked property


#1

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() {
	Tasks.remove(this.props.task._id);
}

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>
			<div className="extra content">

				<div className="ui left floated compact segment">
					
					<div className={taskClassName}>
						<input
							type="checkbox"
							readOnly
							checked={this.props.task.checked}
							onClick={this.toggleChecked.bind(this)}
						/>
						<label></label>
					</div>
				</div>
				<div className="right floated remove">
					<button className="ui icon button" onClick={this.deleteThisTask.bind(this)}>
						<i className="remove icon"></i>
					</button>
				</div>
			</div>
		</div>
	);
}

}


#2

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.