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 ?
Use an arrow function.
onClick={() => handler(index)}
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>
);
}
currentTargetyou 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 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>
)
}
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);
},[]
);
data-index={index}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.
