Get Key Index on Click ES6 React

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