Get Key Index on Click ES6 React - reactjs

Question

I have the following component
const list = (props) => {
const handler = function(){
};
var listItems = props.items.map(function(item, index){
return (
<li key={index} onClick={ handler }>
{item.text}
</li>
)
});
return (
<div>
<ul>
{listItems}
</ul>
</div>
)
}
On Click i'd like to get the index of the li clicked. Using ES6 and without binding how can i do this ?

Answer 1

Use an arrow function.
onClick={() => handler(index)}

Answer 2

You can actually get index without using an arrow function. The only thing you need to do is pass the index as an attribute and get that value from the event as e.target.getAttribute("your_attribute_name")
const list = (props) => {
const handler = function(e){
console.log(e.target.getAttribute("data-index")); //will log the index of the clicked item
};
var listItems = props.items.map(function(item, index){
return (
<li key={index} data-index={index} onClick={ handler }>
{item.text}
</li>
)
});
return (
<div>
<ul>
{listItems}
</ul>
</div>
);
}

Answer 3

you can set the index in the child as data-index and then you get this value in the handler function using event.currentTarget.dataset.index
This will prevent the re-rendering that causes when you use arrow function within render.
const handler = (event) => {
console.log(event.currentTarget.dataset.index);
};
const listItems = props.items.map((item, index) => {
return (
<li key={index} data-index={index} onClick={handler}>
{item.text}
</li>
)
});

Answer 4

This also works:
const list = props => {
const handler = index => () => {
}
const listItems = props.items.map((item, index) =>
<li key={index} onClick={handler(index)}>
{item.text}
</li>)
return <div>
<ul>{listItems}</ul>
</div>
}

Answer 5

You have another way of doing it, really easy to pass any variable to the handleClick function.
An that is using a curry function.
const ListComponent= ({listItems}) => {
const handleClick = (index) => (event) => {
[...]
}
return (
<ul>
{listItems.map((item, index) => (
<li
key={index}
onClick={ handler(index) }
>
{item.text}
</li>
))}
</ul>
)
}