How to pass onClick event to parent component when using iteration in ReactJS?

Question

I want to remove row of table after click event. I already created iteration and show delete button, but have no idea how to pass onClick event from parent to child component in my situation. I tried change const row to component and pass onClick like usually but this method destroys my table.

Parent component:

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

handleDelete{
 alert('here I want to have code to remove row from table')
}

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

Child component:

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

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

Mayank Shukla · Accepted Answer · 2018-01-02 14:25:19Z

6

Steps:

1- Pass a handleDelete function from parent to child TableTasks component:

<TableTasks handleDelete={this.handleDelete}  .... />

2- Define handleDelete in parent:

handleDelete(){....}

3- handleDelete will be available inside TableTasks component, destructure it similar to data:

export const TableTasks = ({ data, header, handleDelete }) => {...}

4- Now pass the handleDelete to row function:

{data.map((x, i) => row(x, i, handleDelete))}

5- Now handleDelete will be available:

const row = (props, i, handleDelete) => {
   console.log('handleDelete', handleDelete);
   return (
       ....
       <DeleteIcon onClick={handleDelete} />
       ....
   )
}

answered Jan 2, 2018 at 14:25

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass onClick event to parent component when using iteration in ReactJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related