Handle click event when button inside cell is pressed

Question

I have a DataTable like this:

render() {
    return(
      <div>
        <DataTable value={this.props.members} header="Members"
          selectionMode="single" onSelectionChange={this.onMemberSelected} 
        >
          <Column field='name' header='Name' sortable />
          <Column field='lastName' header='Last Name' sortable />
          <Column field='address' header='Address' sortable />
          <Column field='country' header='Country' sortable />
          <Column body={ (member, _) => {
            return this.renderDeleteButton(member);
          } }/>
        </DataTable>
      </div>
    );
}

renderDeleteButton(member) {
    return (
        <Button
            label="Delete"
            onClick={ e => { 
                //delete member
            }}
        />
    );
}

onMemberSelected(e) {
    //show member detail
}

When I press "Delete" button, it shows member detail, because the row is handling the event and onMemberSelected is called.

How can I solve this?

Answer 1

You can stop propagation on react synthetic events with stopPropagation(). So in your event handler for the delete button you have to add it like this:

handleDeleteButtonClick = event => {
    event.stopPropagation();

    // handle click
}