How to pass value to component in order to delete table row? ReactJS and Material UI

Question

My purpose is delete specific table row after click. I have two components and already wrote function to remove row from the table handleDelete(). The problem is, after click, always the last row is deleted, not the one on which I clicked. Probably I need to pass value, for example props.nameTask, to parent component but it doesn't work (error in console).

Parent:

class Home extends Component {
  constructor(props) {
  super(props);
  this.state = { data: [] };
  this.handleDelete = this.handleDelete.bind(this);
}

// Delete row from table
handleDelete = (index) => {
 var array = this.state.data.slice();
 array.splice(index, 1)
 this.setState({ data: array });
}

render() {
  return (
   <div>
     <TableTasks handleDelete={this.handleDelete} data={this.state.data} header={[{ name: "Task" }, { name: "Delete" }]} />
   </div>
 );
}}

export default Home;

Child:

  const row = (props, i, handleDelete) =>
    <TableRow key={`thr-${i}`}>
     <TableRowColumn>
      {props.nameTask}
     </TableRowColumn>
     <TableRowColumn className="IconButton">
      <IconButton>
       <DeleteIcon onClick={handleDelete}/>
      </IconButton>
     </TableRowColumn>
    </TableRow>;

export const TableTasks = ({ data, header, handleDelete }) => 
 <Table>
  <TableHeader>
    <TableRow>
     {header.map((x, i) =>
       <TableHeaderColumn key={`thc-${i}`}>
        {x.name}
       </TableHeaderColumn>
     )}
   </TableRow>
 </TableHeader>
 <TableBody>
   {data.map((x, i) => row(x, i, handleDelete))}
 </TableBody>
</Table>;

score 2 · Accepted Answer · answered Jan 03 '18 at 12:18

I believe the problem comes from the index you pass to the parent functionhandleDelete which should not have the value you want (try logging it to see what it is)

I would suggest to add the index you want to delete to your <DeleteIcon/> element as a new property.

Change the parent handleDelete to something like:

handleDelete = e => {
  const index = e.currentTarget.getAttribute('index')
  ...
}

Mayank Shukla · Answer 2 · 2018-01-03T12:23:55.227

For that you need to pass some unique identifier to parent component to delete specific item from array, like name or row index etc.

By row index:

Pass the index to DeleteIcon component:

<DeleteIcon itemIndex={i} onClick={handleDelete}/>

Now from DeleteIcon component call handleDelete function with item index:

this.props.handleDelete(this.props.itemIndex);

Use that index to delete the specific item.

By any other unique property:

Same approach, but you need to run the loop to find the index of that unique item, after getting the index delete the item and update the state.

Suggestion:

Since you are updating the parent array (deleting the elements) so its not a good idea to use the array index as key, use some other unique property for key.

Check this answer for more details: Why using array index as key is not a good idea?

How to pass value to component in order to delete table row? ReactJS and Material UI

2 Answers2