tdog tdog - 6 months ago 18
HTML Question

Using Meteor with input of checkbox

Hello I have having a problem with my checkbox's staying checked when I check them. So what I want to be able to do is check and uncheck as I click the box. But once I check it it is stuck with a check and I can no longer do anything to it. Here is the relevant code!

import React, {Component} from 'react';

export default class ResolutionSingle extends Component {

toggleChecked() {
Meteor.call('toggleResolution', this.props.resolution._id, this.props.resolution.copmlete);
}

deleteResolution() {
Meteor.call('deleteResolution', this.props.resolution._id);
}

render() {
return (
<li>
<input type="checkbox"
readOnly={true}
checked={this.props.resolution.complete}
onClick={this.toggleChecked.bind(this)} />
{this.props.resolution.text}
<button className="btn-cancel"
onClick={this.deleteResolution.bind(this)}>
&times;
</button>
</li>
)
}
}


Here are the methods

Meteor.methods({
addResolution(resolution) {
Resolutions.insert({
text: resolution,
complete: false,
createAt: new Date()
});
},
toggleResolution(id, status) {
Resolutions.update(id, {
$set: {complete: !status}
});
},
deleteResolution(id) {
Resolutions.remove(id);
}
});


Here is the main wrapper

import React from 'react';
import ReactDOM from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';

import ResolutionsForm from './ResolutionsForm.jsx';
import ResolutionSingle from './ResolutionSingle.jsx';


Resolutions = new Mongo.Collection("resolutions");

export default class ResolutionsWrapper extends TrackerReact(React.Component) {
constructor(){
super();

this.state = {
subscription: {
resolutions: Meteor.subscribe("allResolutions")
}
}
}

componentWillUnmount() {
this.state.subscription.resolutions.stop();
}

resolutions() {
return Resolutions.find().fetch();
}

render(){
return (
<div>
<h1>My Resolutions</h1>
<ResolutionsForm />
<ul className="resolutions">
{this.resolutions().map( (resolution)=>{
return <ResolutionSingle key={resolution._id} resolution={resolution} />
})}
</ul>
</div>
)
}
}

Answer

You have a typo in your code.

Meteor.call('toggleResolution', this.props.resolution._id, this.props.resolution.copmlete);

It should be complete instead of copmlete. In order to avoid errors like that in the future, you can use check functions in your Meteor methods.