react render input type checkbox not checked

Question

I have a react component that is a table with each row (entry) having a <td> that is a checkbox. I use state to hold all those entries that have been checked and attached a click handler to a button to delete all those checked entries. The problem is that React renders part of the component based on diffing, so when my component is re-rendered after the delete, some of the new entries has their boxes checked already. How do I get rid of them?

Below is the render function of my component:

  render: function () {
    var that = this;
    var contacts = this.state.contacts.map(function (contact, index) {
      return (
        <tr key={index}>
          <td>{contact.firstName}</td>
          <td>{contact.lastName}</td>
          <td>{contact.city}</td>
          <td>{contact.phone}</td>
          <td>{contact.email}</td>
          <td><input type="checkbox" onClick={that.addToDeleteList.bind(that, contact.id)}/></td>
        </tr>
      );
});

Ted A. · Accepted Answer · 2016-03-12 01:00:30Z

1

You are letting the browser manage the state of those checkboxes.

You can bind checked with something like:

checked={that.state.deleteList.indexOf(contact.id) > -1}

That will bind whether the checkbox is checked to whether or not the id is in the deletelist. As long as you empty the deletelist on delete the boxes should be unchecked.

answered Mar 12, 2016 at 1:00

Ted A.

2,30217 silver badges22 bronze badges

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

1 Comment

akantoword Over a year ago

amazing. you are amazing @ted

Collectives™ on Stack Overflow

react render input type checkbox not checked

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related