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!