Get Key Index on Click ES6 React

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

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>
}

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

Use an arrow function.

onClick={() => handler(index)}