https://stackblitz.com/edit/react-redux-realworld-kt8d2z?file=components/Sports/index.js
class EnhancedTableHead extends React.Component {
createSortHandler = property => event => {
this.props.onRequestSort(event, property);
};
render() {
console.log("sports render --->");
const { order, orderBy } = this.props;
return (
<TableHead>
<TableRow>
{rows.map(row => {
return (
<TableCell
key={row.id}
numeric={row.numeric}
padding="checkbox"
sortDirection={orderBy === row.id ? order : false}
>
<Tooltip
title="Sort"
placement={row.numeric ? 'bottom-end' : 'bottom-start'}
enterDelay={300}
>
<TableSortLabel
active={orderBy === row.id}
direction={order}
onClick={this.createSortHandler(row.id)}
>
{row.label}
</TableSortLabel>
</Tooltip>
</TableCell>
);
}, this)}
<TableCell>
</TableCell>
</TableRow>
</TableHead>
);
}
}