How to call a dispatcher with a value?

Question

React

const todos = [1,.....10000]
  render() {
    return todos.map(item => (
      <div key={item.id} onClick={()=>this.props.toggleTodo(item.id)} />
    ));
  }
}

On click, dispatch to a store with an ID
This code works, but it is a hack, because it creates 10,000 anonymous functions, and as I understand it, they then hang in memory
How to dispatch to a store with an ID but without a crutch with an arrow function?
Are there any other options?
Let me remind you that our ID is known only inside the map loop.
Tell me plz.
I only know the method:
1) take out the React Class Component div and throw this.props.toggleTodo and item into it,
i.e. it will be like this

<Todo toggle = {this.props.toggleTodo} data={item}>

But something is somehow not a very option, you need to stir up the whole RCC for the sake of 1 call ...
Are there any other options?

Answer 1

To solve this problem, you can use the data attribute:

handleTodoClick = e => {
  const { id } = e.target.dataset;
  this.props.toggleTodo(id);
};
render() {
  return todos.map(item => (
    <div key={item.id} data-id={item.id} onClick={this.handleTodoClick} />
  ));
}