I'm mapping Material UI Chips but I don't get cross button on them and neither I can click them or use onTouchTap event.
Here's the mapping
{mapping.map(chipMap => {
return (
<div>
<Chip
key={chipMap._id}
onRequestDelete={this.handleRequestDelete(chipMap)
)}
onTouchTap={this.handleTouchTap(chipMap)}
style={styles.chip}
>
<Avatar src={chipMap.picture} />
{chipMap.name}
</Chip>
</div>
);
})};
If i use this.handleTouchTap(chipMap).bind(this) then it gives undefined in console.
handleRequestDelete = chipMap => {
alert(chipMap.name);
};
handleTouchTap = chipMap => {
alert(chipMap.name);
};
I'm definitely sure the problem is with the this binding but I can't quite figure it out.
I also did this
this.handleRequestDelete = this.handleRequestDelete.bind(this);
in constructor but to no avail.
The chips do get displayed along with accurate avatar picture and name but the close button doesn't gets displayed and I cant click on each Chip to even alert its name, id or picture