I have a <ul> Component wrapping some <li> Components. I want to avoid adding an onClick handler to each li and instead use a single handler on the ul and capture the bubbled events.
What is the correct way of determining / assigning the clicked Component from the bubbled event?
class ListItemComponent extends React.Component {
public render() {
return (
<li>Foo</li>
)
}
}
class ListComponent extends React.Component {
private handleClick(event) {
const target = event.target;
// Determine clicked component, or index etc … ?
}
public render() {
const items = this.props.items.map((x, i) => {
<ListItemComponent active=“false” key={i} />
})
return (
<ul onClick={this.handleClick} />
{ items }
</ul>
)
}
}