React Material UI Delete Selected Cells

Question

I am using a table example from material ui.

This is the link to the online project https://codesandbox.io/s/209kpmpvx0

The example allows you to cell multiple rows and a delete icon gets displayed when you click on the row.

I would like to be able to print out all the selected rows after the delete icon has been pressed.

This is the class that allows you to select a row.

    class EnhancedTable extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          selected: [],
          }

        handleClick = (event, id) => {
        const { selected } = this.state;
        const selectedIndex = selected.indexOf(id);
        let newSelected = [];

    this.setState({ selected: newSelected });
  };

I put the following code selectedId={selected.id} into the EnhancedTableHead component.

return (
  <Paper className={classes.root}>
    <EnhancedTableToolbar numSelected={selected.length} />
    <div className={classes.tableWrapper}>
      <Table className={classes.table} aria-labelledby="tableTitle">
        <EnhancedTableHead
          numSelected={selected.length}
          selectedId={selected.id}
          order={order}
          orderBy={orderBy}
          onSelectAllClick={this.handleSelectAllClick}
          onRequestSort={this.handleRequestSort}
          rowCount={data.length}
        />

Then I added the selectedId to the EnhancedTableToolbar. I also added an event handler into the delete icon.

let EnhancedTableToolbar = props => {
  const { numSelected, classes } = props;
  return (
    <Toolbar
      className={classNames(classes.root, {
        [classes.highlight]: numSelected > 0
      })}
    >
      <div className={classes.title}>
        {numSelected > 0 ? (
          <Typography color="inherit" variant="subheading">
            {numSelected} selected
          </Typography>
        ) : (
          <Typography variant="title" id="tableTitle">
            Nutrition
          </Typography>
        )}
      </div>
      <div className={classes.spacer} />
      <div className={classes.actions}>
        {numSelected > 0 ? (
          <Tooltip title="Delete">
            <IconButton aria-label="Delete">
              <DeleteIcon onClick={printdeletearray} />
            </IconButton>
          </Tooltip>
        ) : (
          <Tooltip title="Filter list">
            <IconButton aria-label="Filter list">
              <FilterListIcon />
            </IconButton>
          </Tooltip>
        )}
      </div>
    </Toolbar>
  );
};

I get an error saying selectedId is undefined.

   const printdeletearray = () => {
      console.log(this.state.selected);
    };

score 1 · Accepted Answer · answered Jul 16 '18 at 10:09

1

You made two mistakes I guess:

firstly you should pass selected as selectedId props in <EnhancedTableToolbar />:

<EnhancedTableToolbar
    numSelected={selected.length}
    selectedId={selected}
/>

the second mistake is that you should pass selectedId to printdeletearray() like this:

<DeleteIcon onClick={() => printdeletearray(selectedId)} />

and here is your Demo

answered Jul 16 '18 at 10:09

Emad Emami

6,089
3
28
38

thanks for the help. can i ask why did you have to use ()=> on the clickhandler. – Great Khan 2016 Jul 16 '18 at 10:32
1

you are welcome, read this: https://stackoverflow.com/a/29810951/2357848 – Emad Emami Jul 16 '18 at 10:35

React Material UI Delete Selected Cells

1 Answers1