title: How to get react element from event.target
body: <p>I have attached an event listener to the parent element to listen for a non-synthetic-event and I wonder if there is a nice way to get reference to the component which triggers the event to use it's properties </p>
  
  <p>I need to postpone the rendering of <code>item.component</code> until the <code>nonSyntheticEvent</code> occurs</p>
  
  <pre><code>const items = [
    {
      name: "click me",
      component: function First() {
        return &lt;strong&gt;asd&lt;/strong&gt;;
      }
    },
    {
      name: "click me 2",
      component: function Second() {
        return &lt;b&gt;oasd&lt;/b&gt;;
      }
    }
  ];
  
  class Component extends React.Component {
    componentDidMount() {
      this.el.addEventListener("nonSyntheticEvent", event =&gt;
        this.nonSyntheticEventHandler(event)
      );
    }
  
    nonSyntheticEventHandler(event) {
  
      // how to get reference to item
      // from event.target to render it's item.component
  
      const el = React.createElement(item.component);
      ReactDOM.render(el, event.target);
    }
  
    render() {
      return (
        &lt;div ref={ref =&gt; { this.el = ref; }}&gt;
          {this.props.items.map(item =&gt; &lt;Child {...item} /&gt;)}
        &lt;/div&gt;
      );
    }
  }
  
  &lt;Component items={items} /&gt;
  </code></pre>