Pass value to onClick method in template in React

React boys and girls, here

                <List component="nav" aria-label="main mailbox folders">
           any, i: any) =>
                      <ListItem button key={i}>
                          <InboxIcon />
                        <ListItemText primary={todo.item} />
                          <IconButton edge="end" aria-label="delete" onClick={this.handleDelete}>
                            <DeleteIcon />

when the onClick= is triggered, I want to pass the todo.item to it, so as to access in

  handleDelete(value: any) {

How is it done in react?

Okay, got it

                        <IconButton edge="end" aria-label="delete" onClick={(e) => {
                            <DeleteIcon />

You might want to remove e.stopPropagation() and pass e to this.handleDelete() so you can keep the onClick clean. Also, you don’t want to use the index as the key in the list item.

1 Like