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 ?

@yury : looks like it is not a best practice - see https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md#protips — Nicc, Oct 14 '16 at 14:57
Makes sense. Why don't you want to follow their recommendation to use separate component for list item? — Yury Tarabanko, Oct 14 '16 at 15:10
Possible duplicate of [React js onClick can't pass value to method](http://stackoverflow.com/questions/29810914/react-js-onclick-cant-pass-value-to-method) — Pranesh Ravi, Oct 14 '16 at 15:35

score 41 · Accepted Answer · answered Oct 14 '16 at 14:33

41

Use an arrow function.

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

answered Oct 14 '16 at 14:33

Radio-

3,151
21
22

4

using arrow function is not recommended if using eslint plugin – Nicc Oct 14 '16 at 14:58
Then you have to create new items for your components and pass the index prop to it. – Radio- Oct 14 '16 at 15:17
7

This is a soft "bad practice" as everytime the element renders it will create a new function, it could cause double renders in some cases. – Obed Parlapiano Nov 13 '17 at 09:17
Correct way can be found here: https://stackoverflow.com/questions/29810914/react-js-onclick-cant-pass-value-to-method – Obed Parlapiano Nov 13 '17 at 09:18
Please avoid anonymous functions as much as you can. – Rishav May 05 '20 at 12:53

score 17 · Answer 2 · answered Mar 04 '19 at 10:17

17

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

answered Mar 04 '19 at 10:17

Salman Momin

327
2
4

2

Why is this a better approach than the accepted answer above? – Hamund Mar 19 '19 at 08:45
2

@Hamund citation from google "If you use arrow functions within render , each call to render will create new function objects. If you then pass these functions to child elements via props , optimizations based on PureComponent or shouldComponentUpdate will fail (as the arrow function props will change on every render)." - So if you are into performance then it's better to pass a ref to a function instead of an arrow function. – Norfeldt Jul 31 '19 at 20:28
1

@SallyRothroat: this will not work because event.target can be any element inside
element.

user2428804

Apr 03 '20 at 17:53

3

change to `currentTarget` – FDisk Aug 25 '20 at 13:12

score 1 · Answer 3 · answered Jul 04 '21 at 23:24

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

score 1 · Answer 4 · answered Aug 06 '21 at 07:19

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

score 1 · Answer 5 · answered Mar 15 '22 at 17:11

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

score 1 · Answer 6 · answered Mar 28 '23 at 09:09

1

You can just get the index of the currentTarget within its parentElements childs. Like this:

const handleClick = useCallback<React.MouseEventHandler<HTMLElement>>(
    (event) => {
        const currentEl = event.currentTarget;
        const index = [...el.parentElement.children].indexOf(el);
        
        // do stuff with index
        doSomethingWithIndex(index);
    },[]
);

answered Mar 28 '23 at 09:09

DaanH

57
7

Best answer, because this is a single function without the need for a separate function per element and no need for using `data-index={index}` – Christiaan Westerbeek Jul 03 '23 at 14:47

score 0 · Answer 7 · answered Apr 21 '23 at 06:55

You can write an anonymous function.

  <li key={index} onClick={() => handler(index) }>
        {item}
      </li>

Or you can write a child component to render the ListItem and pass index as prop to a child component.

interface ListItemProps { 
  item: string,
  index: number
}
  
const ListItem: React.FC<ListItemProps> = ({ item, index }) => {

  const handler = (index: number) => {
    console.log(" Item clicked: ", index); 
  };
   return   (<li key={index} onClick={() => handler(index) }>
   {item}
 </li>)
    
}


const list = ( ) => {


  const items = ['AAA', 'BBB', 'CCC']
  
  var listItems = items.map( (item:string, index: number) => {
    return <ListItem key={index} item={item} index={index} />
  });

  return (
    <div>
      <ul>
        {listItems}
      </ul>
    </div>
  )
}

First approach is simpler and readable. The second approach is good when the rendering child element is more involved.

Get Key Index on Click ES6 React

7 Answers7

Linked

Related