title: Popover doesn't work if you have many of them on one page. How to manage them?
body: <p>Examples here <a href="http://www.material-ui.com/#/components/popover" rel="nofollow">http://www.material-ui.com/#/components/popover</a> are valid for one Popover element on the page only. If one follows their examples it is not possible to have more than one Popover on one page. Because Popovers begin interfering each other.</p>
  
  <p>For example. Here is a markup for a single popover. And imagine that you have ten of these in one page:</p>
  
  <pre><code>&lt;div onClick={this.openPopover}&gt;Open Popover&lt;/div&gt;
  &lt;Popover
      open={this.state.open}
      anchorEl={this.state.anchorEl}
      anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
      targetOrigin={{horizontal: 'left', vertical: 'top'}}
      onRequestClose={this.closePopover}
      animated={true}
      &gt;
      &lt;div style={{padding: '20px'}}&gt;
          &lt;p&gt;Hello World&lt;/p&gt;
      &lt;/div&gt;
  &lt;/Popover&gt;
  </code></pre>
  
  <p>Here is their React handlers according to <code>material-ui.com</code> examples. And with this, if I trigger one popover, all of them are opened. Because <code>this.state.open</code> is common for every popover:</p>
  
  <pre><code>getInitialState() {
      return {
          open: false,
      };
  },
  
      openPopover(event) {
          this.setState({
              open: true,
              anchorEl: event.currentTarget,
          });
      },
      closePopover(reason: string) {
          this.setState({
               open: false,
          });
      },
  </code></pre>
  
  <p>I want to have only those two handlers - <code>openPopover</code> and <code>closePopover</code>. I do not want to create 20 separate handlers for my 10 popovers.</p>
  
  <p>Because of strange signature of <code>closePopover</code> function (for some reason they made it to expects a string instead of an <code>event</code> or an <code>anchorElement</code>) it is not possible to pass it anything to determine property on-the-fly as ES6 allows, for example:</p>
  
  <pre><code>getInitialState() {
      return {
          popover1: false,
      };
  },
  
      // e.g. getAttribute('data-name') == 'popover1'
      // &lt;div onClick={this.openPopover} data-name="popover1"&gt;Open Popover&lt;/div&gt;
  
      openPopover(event) {
          this.setState({
              [event.currentTarget.getAttribute('data-name')]: true,
              anchorEl: event.currentTarget,
          });
      },
  
      // and here instead of useless "reason: string", an event or anchorElement would do the trick
      closePopover(reason: string) {
          this.setState({
               [event.currentTarget.getAttribute('data-name')]: false,
          });
      },
  </code></pre>
  
  <p>What is <code>material-ui.com</code> best practice to have multiple popovers in one page? Hope the answer isn't to create a separate React Popover class for each popover on the page. Also hope it is not to create a separate handler functions for each and every popover.</p>