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

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} /> .... ) }

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related