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 (
            <MuiThemeProvider>
                <div>
                    <List id="parent-list-tags">
                        <ListItem primaryText="Kitchen" onTouchTap={this.handleClick()}/>
                        <ListItem primaryText="Beach" onClick={this.handleClick()}/>
                        <ListItem primaryText="Marriage" onClick={this.handleClick()}/>
                        <ListItem primaryText="Garden" onClick={this.handleClick()}/>
                    </List>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
                    <div className="backButton">
                        <RaisedButton backgroundColor="#293C8E" label="Back" onClick={this.handleButtonClick} labelColor="white">

                        </RaisedButton>
                    </div>
                </div>
            </MuiThemeProvider>

        );
    }
}

const mapStateToProps =(state) =>{
    return {
        tags: state.tagReducer
    };
};

function matchDispatchToProps(dispatch){
    return bindActionCreators({tagSelected: tagSelected}, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(TagListItemDetails);

firstList

export default class TagList extends Component {


    handleClicked() {
        console.log("firstList Clicked")
        browserHistory.push("TagListItemDetails")
    }

    render() {

        return (
            <div>
                <List id="parent-list-tags" >
                    <ListItem primaryText="Scene" onClick={this.handleClicked}  />
                    <Divider/>
                    <ListItem primaryText="Actors" onClick={this.handleClicked} />
                    <Divider/>
                    <ListItem primaryText="Emotions" onClick={this.handleClicked} />
                    <Divider/>
                    <ListItem primaryText="Actions" onClick={this.handleClicked}/>
                    <Divider/>
                    <ListItem primaryText="Objects" onClick={this.handleClicked}/>
                    <Divider/>
                    <ListItem primaryText="Compliance" onClick={this.handleClicked} />
                </List>
                <AddButton />
            </div>

    )
    }
};

Solution

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

<ListItem primaryText="Beach" onClick={this.handleClick()}/>

you can use:

<ListItem primaryText="Beach" onClick={this.handleClick}/>
------------------------------------------------------^^ 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

Comments

[Piotr Berebecki]

Does the above answer your question or would you like me to add anything?

[EdG]

I have one problem but. What should I do if I want to pass the both, the action as well as handleClickEvent method to my onClick. How should I do it?

[Piotr Berebecki]

You can pass the event like so: <div onClick={(event) => this.props.onClick('Secret message', event)}> Have a look at the updated codepen.

[EdG]

I want to fire two functions on onClick and not a message and event

[Piotr Berebecki]

No problem :) I've updated codepen with two functions fired onClick.

[EdG]

So I didn't understand it. Can you please write the exact code lines for my code to make it work. Would be a big help.

[Piotr Berebecki]

Please add a codepen or JSFiddle explaining the issue so that I can help you out. Otherwise we will be going in circles :)