Material UI List onClick fires click event on nested list

Question

I have a material ui list in my one of the component. When I click any item of this list, I go to another listView. I am using router to go to another listView. And using onClick method. Whenever I click any list item of first list I print "firstList clicked". and whenever I click any item if second list, it print "secondList clicked". Here is my Problem: When I click the ListItem of first list, the console.log("secondList clicked") also gets printed with "firstList Clicked" automatically. I have four list items in second list, so my console print output looks like this firstList Clicked secondList Clicked secondList Clicked secondList Clicked secondList Clicked Why is this happening? Here is my code. SecondList code ``` class TagListItemDetails extends Component { handleClick() { console.log("secondList clicked") } handleButtonClick() { browserHistory.push("TagList") } render() { return (

Accepted Answer

The problem is that in the `SecondList`, you are invoking the `handleClick` method as soon as the component is loaded. Try removing the parentheses `()` from the onClick handler. So instead of ``` ``` you can use: ``` ------------------------------------------------------^^ No parentheses here ``` One way of passing arguments to a click handler passed as a prop is to use the fat arrow function: ``` onClick={() => this.props.itemSelected(2)} // or if you want to pass the event as well: onClick={(event) => this.props.itemSelected(2, event)} ``` Also, here is a demo of how to fire two functions on `onClick` event : http://codepen.io/PiotrBerebecki/pen/YGRQrG

Material UI List onClick fires click event on nested list

Solution

Problem