vendredi 11 mars 2016

react render input type checkbox not checked

I have a react component that is a table with each row (entry) having a 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>
      );
});




Aucun commentaire:

Enregistrer un commentaire