Material-UI List as children of Card, fires all onClick on main expand

Viewed 3677

Material-UI, Meteor, React

So I want to nest a drop down list with onTouchTap (or onClick) functions inside of a card.

It seems to work fine, renders everything no bother - but when you expand the parent card, all in the list the onTouchTap fire at the same time.

I have tired also nesting other Card elements inside each other to the same effect.

Is this just a restriction of the code, or is there some work around?

                    <Card>
            <CardHeader
                title={this.props.foodItem.foodName}
                subtitle={this.genPrtnImg()}
                avatar={this.props.foodItem.imgURL}
                actAsExpander={true}
                showExpandableButton={true}

            />
            <CardText expandable={true}>
                <List subheader="Item Requests">
                    <ListItem
                    primaryText={userName}
                    secondaryText={"Has requested " + prtNo + " portions"}
                    leftAvatar={<Avatar src="http://thesocialmediamonthly.com/wp-content/uploads/2015/08/photo.png" />}
                    primaryTogglesNestedList={true}
                    nestedItems={[
                         <ListItem
                            key={1}
                            primaryText="Accept"
                            leftIcon={<SvgIcons.ActionCheckCircle color='Green'/>}
                            onTouchTap={this.handleAccept(userName, prtNo)}
                         />,
                         <ListItem
                            key={2}
                            primaryText="Reject"
                            leftIcon={<SvgIcons.ContentBlock color='Red'/>} 
                            onTouchTap={this.handleReject(userName)}
                         />,
                    ]}

                />
              </List>
            </CardText>

              </Card>

Any help would be greatly appreciated, thanks!

2 Answers
Related