React Event Bubbling: Finding the target Component

Viewed 1476

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>
        )
    }   
}
1 Answers
Related