Writing React Component with multiple checkbox

Question

I have written his react component

  class RegistrationSpecialNeeds extends React.Component {
     constructor(props) {
        super(props);
        this.state = {"specialneeds": []}
        this.isChecked.bind(this)
     }
     handleChange(event, key) {
        console.log('came inside handle checkbox event')
        console.log('what is event ' + event.target.checked)
        console.log('what is key' + key)
     }
     isChecked(key) {
        if (this.state.specialneeds.indexOf(key) > -1) {true} else {false}
     }
     render() {
        return (
           <div>
           <label> check all that apply
              {
                 this.props.restrictions.map((restriction, index) => 
                    <div>
                    <label>
                       <input type='checkbox' name='restriction' checked={this.isChecked(restriction.key)} onChange={(e) => this.handleChange(e, restriction.key)}/>{restriction.key}) {restriction.name}
                    </label>
                    </div>
                 )
              }
           </label>
           </div>
        )
     }
  }

<RegistrationSpecialNeeds restrictions={[{key: "a", name: "Dietary Restrictions"}, {key: 'b', name: 'Physical Disabilities'}, {key: 'c', name: 'Medical Needs'}]} />

When I select something in the checkbox I get output

[Log] came inside handle checkbox event (Registration.html, line 29) [Log] what is event undefined (Registration.html, line 30) [Log] what is keya (Registration.html, line 31)

how can I get the event object?

Sangram Badi · Accepted Answer · 2018-03-12 05:01:03Z

1

this.props.restrictions.map((restriction, index) => 
                  <div>
                  <label>
                     <input type='checkbox' name='restriction' onChange={handleChange.bind(this, restriction.key)}/>{restriction.key}) {restriction.name}
                  </label>
                  </div>
               )

try to pass the value from input field and check the value in your handleChange method. use onChange attribute

answered Mar 12, 2018 at 5:01

Sangram Badi

4,30412 gold badges50 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Knows Not Much Over a year ago

onChange(handleChange.bind(this, restriction.key)) doesn't provide the right parameters to the actual handleChange method. I did more googling and posted updated code above.

Knows Not Much · Accepted Answer · 2018-03-17 19:24:27Z

0

The following is the right way to pass the extra parameter which worked for me

onChange={(e) => this.handleChange(e, restriction.key)}

and the event handler looks like

 handleChange(event, key) {
   console.log('came inside handle checkbox event')
   console.log('what is event ' + event.target.checked)
   console.log('what is key' + key)
}

answered Mar 17, 2018 at 19:24

Knows Not Much

31.8k66 gold badges208 silver badges395 bronze badges

Collectives™ on Stack Overflow

Writing React Component with multiple checkbox

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related