Как вызвать диспатч со значением?

Question

[webe]

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

По клику диспатчим в стор с ID
Этот код работает, но он костыльный, потому что создает 10000 анонимный функций и как я понял они потом висят в памяти

Как диспачнуть в стор с ID но без костыля с стрелочной функцией?
Есть ли еще варианты?
напомню, что ID у нас известен только внутри цикла map.
Подскажите плиз.

Я знаю лишь метод:
1) вынести div React Class Component и пробросить в него this.props.toggleTodo и item
т.е. будет так

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

Но что-то как-то не очень варииант, нужно мутить целый RCC ради 1 вызова...

Есть ли еще варианты?

Answer 1

[Антон Спирин]

Для решения этой задачи можно использовать data атрибут:

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

Comments

[Максим]

поддерживаю, data-* атрибуты удобны.