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>
);
}
}