如何将映射元素添加到状态 onClick？

Question

In the render of my App.js component I have table that displays items mapped from an array. The array has objects with string values for code and mod_name

...
{modules.map((mod, i) => (
  <tr>
    <td> {mod.code} </td> 
    <td> {mod.mod_name} </td>
    <td>
      <Input type="button" onClick={this.onCheckbox(mod.code)} /> 
    </td>
  </tr>
))}
...

The Input is a checkbox, and I want to add/remove the mod.code for the row based on if the checkbox is marked.

Currently, my onCheckbox method looks like this:

onCheckbox (data) {
  const arr = this.state.selected;
  if(arr.includes(data)) {
    const index = arr.indexOff(data)
    if(index > -1) {
      arr.splice(index, 1);
      this.setState({selected: arr})
    }
  } else {
    this.setState({selected: [...this.state.selected: arr]})
  }
}

However, I get an error: Unhandled Rejection (Error): Maximum update depth exceeded.

How should I go about doing this?

Answer 1

{modules.map((mod, i) => (
  <tr>
    <td> {mod.code} </td> 
    <td> {mod.mod_name} </td>
    <td>
      <Input type="button" onClick={this.onCheckbox(mod.code)} /> 
      <button onClick={()=> deleteHandle(mod)}>Delete</button>
    </td>
  </tr>
))}

function deleteHandle

function deleteHandle=item=>{
 let filtered = this.state.modules.filter(module=>module.id!==item.id);
 this.setState({modules: filtered})
}

Like i created for button you can change as per your objective/requirement.