Provide custom param to DOM event handler. And avoid memory-consuming bindings or arrow functions.
npm install --save react-event-param
import React, { Component } from "react";
import { setEventParam, getEventParam } from "react-event-param";
class List extends Component {
state = {
selectedIndex: null
};
onItemClick = e => {
const index = getEventParam(e.target);
this.setState({
selectedIndex: index
});
};
render() {
return (
<ul>
{this.props.items.map((itemText, index) => (
<li
key={index}
{...setEventParam(index)}
onClick={this.onItemClick}
>
{{ itemText }}
</li>
))}
</ul>
);
}
}
export default List;