Material UI Chip cross button / delete button not working

Viewed 2601

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

1 Answers
Related