material-ui: Get label from Chip component inside onClick() handler

Question

-- Material-UI / React / Redux --

I have a material-ui table. Inside each <TableRow> there are some <TableCell> components with their own <Chip> components. These <Chip> components are rendering text through the label property.

I need to be able to extract the label inside the onClick handler, which in my case is the chipFilter() function.

I am going to use that label to filter my redux state and return new data for the larger component rendering the table.

Click Handler

chipFilter = () => {
     console.log(this)
     console.log(this.props)
     console.log(this.props.label)
}

Component render

Each row that is rendered in the table:

<TableRow key={n.id}>    
    <TableCell 
        component="th" 
        align="center"
        scope="row">
        <Chip 
            label={n.procedure} 
            variant="outlined" 
            color="primary"
            clickable={true}
            onClick={this.chipFilter} />
    </TableCell>

    <TableCell align="center">
        <Chip 
            label={n.doctor} 
            variant="outlined" 
            color="primary"
            clickable={true}
            onClick={this.chipFilter} />
    </TableCell>
        .
        .
        .
</TableRow>

Thanks for the help!!

Answer 1

A simple solution would be to update your onClick handler so that the n object which contains the meta data of the clicked <Chip> is passed through to chipFilter() like so:

<Chip label={n.procedure} variant="outlined" color="primary" clickable={true}
      onClick={ () => this.chipFilter(n) } />

And then update the chipFilter function as follows:

/* Item argument contains data for clicked chip component */
chipFilter = (item) => {
     console.log(this)
     console.log(item)
     console.log(item.label)
}