CODEWITHSUNDEEP
reactjsmaterial-ui
Extelliqent
Extelliqent

Reputation: 1860

React Send Target Along with OnClick Event

I have two Popper elements of Material UI, they are supposed to open up different menus. How can I have only 1 Display function like this to make both Popper elements open and close independently? I was trying to give one popper target="appUI" and other target="userUI" so then through event.target.target I would be able to figure out which one they clicked and show that popper but I couldn't get it to work..

  popperDisplay = event => {
    console.log(event.target)
    const { currentTarget } = event;
    this.setState(state => ({
      anchorEl: currentTarget,
      userUI: !state.userUI,
    }));
  };

Below is the sample project I created to display the issue https://codesandbox.io/s/k28o1lxw43

Upvotes: 0

Views: 105

Answers (2)

Katia Wheeler
Katia Wheeler

Reputation: 549

You can pass the event through wherever you're passing the onClick handler like this:

<button onClick={event => this.popperDisplay(event)} />

Upvotes: 1

Shivam Gupta
Shivam Gupta

Reputation: 1238

Use the id of the element you are calling from popperDisplay(event, id) to distinguish elements.

https://codesandbox.io/s/1qrn61q2y3?fontsize=14

You'll have access to the id in the display().

Upvotes: 1

Related Questions