title: How set React Component on onClick() event inside div-element
body: <p>I have one React PureComponent which makes some fetch and after return a <code>table(list of div's)</code> of div-elements. Each <code>div</code> has inside some span elements.  </p>
  
  <p>Also, I have another React Component which must open some HTML elements.  </p>
  
  <p>I want to set 2nd React Component on <code>onClick()</code> event for each <code>div</code> element from the 1st React PureComponent. So in the ideal situation, it must open me some kin of modal page when I will click on <code>div</code> element.  </p>
  
  <p>Now it looks like that nothing happened when I click on <code>div</code> element</p>
  
  <p>1st PureComponent</p>
  
  <pre><code>import React, { Component } from "react";
  import Modal from "../components/modal/form";
  
  let test = {};
  
  const PATH_BASE = "my url which works fine";
  
  console.log("1st try Actions");
  const i = 10;
  
  class Actions extends React.PureComponent {
    constructor() {
      super();
      this.state = {
        result: null,
        show: false
      };
      this.setSearchTopStories = this.setSearchTopStories.bind(this);
      this.showModal = this.showModal.bind(this);
    }
    showModal = e =&gt; {
      this.setState({
        show: !this.state.show
      });
    };
    setSearchTopStories(result) {
      this.setState({ result });
    }
    componentDidMount() {
      fetch(`${PATH_BASE}`)
        .then(response =&gt; response.json())
        .then(result =&gt; this.setSearchTopStories(result))
  
        .catch(error =&gt; error);
    }
    render() {
      const { searchTerm, result } = this.state;
      console.log("* Actions Pure*");
      console.log(result);
      console.log("=");
  
      return (
        &lt;div&gt;
          {result !== null
            ? result.map((item, index) =&gt; (
                &lt;div
                  onClick={() =&gt; (
                    &lt;Modal onClose={this.showModal} show={this.state.show}&gt;
                      Mdl--
                    &lt;/Modal&gt;
                  )}
                &gt;
                  &lt;span&gt;{item.name}&lt;/span&gt;
                  &lt;span&gt;{item.amount}&lt;/span&gt;
                &lt;/div&gt;
              ))
            : null}
        &lt;/div&gt;
      );
    }
  }
  
  export default Actions;
  </code></pre>
  
  <p>2nd Component</p>
  
  <pre><code>import React from "react";
  import Actions from "../../data/Actions";
  
  export default class Modal extends React.Component {
    onClose = e =&gt; {
      this.props.onClose &amp;&amp; this.props.onClose(e);
    };
    render() {
      console.log("KLICK");
      if (!this.props.show) {
        return null;
      }
      return (
        &lt;div&gt;
          &lt;div&gt;{this.props.children}&lt;/div&gt;
          &lt;div&gt;
            &lt;button
              onClick={e =&gt; {
                this.onClose(e);
              }}
            &gt;
              Close
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>