React-sortable-hoc: onClick event is triggering on component render

[raghav1086]

I am using a delete icon inside list item to give the ability to remove the list item. I am adding onClick method on image icon. But every time component loads onClick method is triggering automatically and removing all the list items. And after component loads onClick event doesn't work. Any pointer what could be the work around for this to stop triggering onClick method on component render. I have already tried pressDelay and distance props but doesn't seems work.

Here is my code reference

handleDelete(index) {
    this.props.removeItem(index)
  }

render() {
  return (
    <ListItem style={styles.item} key={`item-${key}`} index={key} handle>
       { items[key].name}
       <img src="./images/icon-remove.png" width="16" onClick={this.handleDelete(key)} />
     </ListItem>
  )
}

[cameronmcefee]

Hi @raghav1086,

Your click handler is being called on load because you're calling it on load ;). The contents of the {} are executed on load, so this.handleDelete(key) is literally trying to call your handler as soon as it is seen. To set a click handler _and_ pass it a specific value, you have to make your handler a function that calls your handler, something like

onClick={() => this.handleDelete(key)}

[clauderic]

@cameronmcefee is absolutely right, thanks for jumping in on this issue 😄