CODEWITHSUNDEEP
reactjstypescriptdynamic
codaending
codaending

Reputation: 13

How to check dynamically rendered checkboxes

I'm rendering some checkboxes dynamically, but currently I'm only able to check the first box, and all other boxes operate the first one. How do I get the boxes to work independently of each other?

This is typescript in React. I've tried changing the interface I'm referencing in the function, thinking I was referencing the wrong thing, but none of those worked.

This is the function:

handleCheckboxClick = (entitlement: IApiEntitlements, checked: boolean): void => {
    if (checked === true) {
        this.selectedEntitlementIDs.push(entitlement.id);
    } else {
        const index: number = this.selectedEntitlementIDs.indexOf(entitlement.id);
        this.selectedEntitlementIDs.splice(index, 1);
    }
    //tslint:disable-next-line:prefer-const
    let entitlementChecked: IEntitlementChecked = this.state.entitlementChecked;
    entitlementChecked[entitlement.id] = checked;
    let selectAll: boolean = false;
    if (this.selectedEntitlementIDs.length === this.state.responses.apiResponses.apiClients.length) {
        selectAll = true;
    }
    this.setState({
        entitlementChecked: entitlementChecked,
        selectAll: selectAll
    });
    console.log(this.selectedEntitlementIDs, 'hi');
    console.log(entitlementChecked, 'hello');
}

And this is where it's being called:

return (
   <Checkbox
     checked={this.state.entitlementChecked[entitlement.id]}
     data-ci-key={entitlement.id}
     id='api-checkbox'
     key={entitlement.id}
     labelText={entitlement.label}
     onChange={this.handleCheckboxClick}>
   </Checkbox>
);

I expect each checkbox to be able to be checked, but currently on the first one works, and all others check or uncheck that first one.

Upvotes: 1

Views: 276

Answers (1)

John Ruddell
John Ruddell

Reputation: 25842

You shouldn't keep an array as a property on the class that keeps track of selected items, this isn't tied to the React lifecycle and could potentially not update the view when you want to. Instead you should just use your map (entitlementChecked) you already have to determine if something is checked or not. 

handleCheckboxClick(id) {
  this.setState(prevState => ({
    entitlementChecked: {
      ...prevState.entitlementChecked,
      [id]: !prevState.entitlementChecked[id]
    }
  }));
}

When calling the handler method, you can just pass the id through that you need specifically.

onChange={this.handleCheckboxClick.bind(null, item.id)}

Here's a rudimentary example for more detail :)

Upvotes: 1

Related Questions