How can I put the handleToggle() function in my code? There is an error "Cannot read property 'checked' of undefined"


#1

I would like to put “handleToggle()” function in my code.
When I put the function in my code there is an error “Cannot read property ‘checked’ of undefined”.
How can I accomplish this to work? (for “accompaid”)

Here’s my code:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Row, Col, FormGroup, ControlLabel, FormControl, Checkbox, Button } from 'react-bootstrap';
import { Meteor } from 'meteor/meteor';
import validate from '../modules/validate';

class ContributionEditor extends Component {
	componentDidMount() {
		const component = this;
		validate(component.form, {
			rules: {	
				salution: {
					required: false,
				},
				firstname: {
					required: true,
				},
				lastname: {
					required: false,
				},
				sex: {
					required: false,
				},
				age: {
					required: false,
				},
				province: {
					required: false,
				},
				bhumdharmlevel: {
					required: false,
				},
				accommodation: {
					required: false,
				},
				accompaid: {
					required: false,
				},
			},
			messages: {
				firstname: {
					required: 'please input your firstname',
				},
			},
			submitHandler() { component.handleSubmit(); },
		});
	}
	
	
	handleToggle() {
		this.accompaid.checked = !this.accompaid.checked;
	}
	
	handleSubmit() {
		const { history } = this.props;
		const existingContribution = this.props.contrib && this.props.contrib._id;
		const methodToCall = existingContribution ? 'contributions.update' : 'contributions.insert';
		const contrib = {
			salution: this.salution.value.trim(),			
			firstname: this.firstname.value.trim(),
			lastname: this.lastname.value.trim(),
			sex: this.sex.value,
			age: parseInt(this.age.value),
			province: this.province.value.trim(),
			bhumdharmlevel: this.bhumdharmlevel.value.trim(),
			accommodation: Number(this.accommodation.value),
			accompaid: Boolean(this.accompaid.value),
		};
		
		
		
		if (existingContribution) contrib._id = existingContribution;
		
		Meteor.call(methodToCall, contrib, (error, contributionId) => {
			if (error) {
				console.log('danger');
			} else {
				const confirmation = existingContribution ? 'Contribution updated!' : 'Contribution added!';
				this.form.reset();
				console.log('success');
				history.push(`/contributions`);
			}
		});
	}
	
	render() {
		const { contrib } = this.props;
		return (
	<Row>
    	<Col xs={12} sm={6} md={5} lg={4}>
			<form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
      			<FormGroup>
        		<ControlLabel>Salution</ControlLabel>
        			<input
        				type="text"
		    		    className="form-control"
        				name="salution"
          				ref={salution => (this.salution = salution)}
          				defaultValue={contrib && contrib.salution}
        			/>
      			</FormGroup>
      			<FormGroup>
        		<ControlLabel>First Name</ControlLabel>
        			<input
        				type="text"
		    		    className="form-control"
        				name="firstname"
          				ref={firstname => (this.firstname = firstname)}
          				defaultValue={contrib && contrib.firstname}
        			/>
      			</FormGroup>
      			<FormGroup>
      			<ControlLabel>Last Name</ControlLabel>
        			<input
        				type="text"
		    		    className="form-control"
        				name="lastname"
          				ref={lastname => (this.lastname = lastname)}
          				defaultValue={contrib && contrib.lastname}
        			/>
      			</FormGroup>   
				<FormGroup>
        		<ControlLabel>Sex</ControlLabel>
        			<FormControl componentClass="select" name="sex" inputRef={sex => (this.sex = sex)} defaultValue={contrib && contrib.sex}>
        				<option value="male">male</option>
        				<option value="female">female</option>
        			</FormControl>
      			</FormGroup>
				<FormGroup>
        		<ControlLabel>Age</ControlLabel>
        			<input
        				type="number"
		    		    className="form-control"
        				name="age"
          				ref={age => (this.age = age)}
          				defaultValue={contrib && contrib.age}
        			/>
      			</FormGroup>      			
      			<FormGroup>
      			<ControlLabel>Province</ControlLabel>
        			<input
        				type="text"
		    		    className="form-control"
        				name="province"
          				ref={province => (this.province = province)}
          				defaultValue={contrib && contrib.province}
        			/>
      			</FormGroup>
				<FormGroup>
        		<ControlLabel>Bhumdharmlevel</ControlLabel>
        			<FormControl componentClass="select" name="bhumdharmlevel" inputRef={bhumdharmlevel => (this.bhumdharmlevel = bhumdharmlevel)} defaultValue={contrib && contrib.bhumdharmlevel}>
        				<option value="first">first</option>
        				<option value="second">second</option>
        				<option value="third">third</option>
        				<option value="forth">forth</option>
        				<option value="fifth">fifth</option>        				
        			</FormControl>
      			</FormGroup>
      			<FormGroup>	
      			<ControlLabel>Accommodation Paid</ControlLabel>
        			<input
        				type="number"
		    		    className="form-control"
        				name="accommodation"
          				ref={accommodation => (this.accommodation = accommodation)}
          				defaultValue={contrib && contrib.accommodation}
        			/>
      			</FormGroup>
      			<FormGroup>
        			<Checkbox readOnly name="accompaid" inputRef={accompaid => (this.accompaid = accompaid)} defaultChecked={contrib && contrib.accompaid} onChange={this.handleToggle}>
        			<span className="text">Already paid</span>
        			</Checkbox>
      			</FormGroup>
      				<Button type="submit" bsStyle="success">
        			{contrib && contrib._id ? 'Save' : 'Add'}
      			</Button>
    		</form>
    	</Col>
    </Row>
    	);
  	}
}

ContributionEditor.defaultProps = {
  contrib: { firstname: '' },
};

ContributionEditor.propTypes = {
  contrib: PropTypes.object,
  history: PropTypes.object.isRequired,
};

export default ContributionEditor;