title: Using React portals to show a modal component(?) when a table row is clicked
body: <p>While becoming acquainted with React I stumbled upon the concept of portals in the developer documentation. However, I'm having difficulty understanding how this portal component actually renders on-demand, and how I can pass data to it to populate a modal.</p>
  
  <p>Currently, I have two components that interact with each other: <code>View.js</code> and <code>DataTable.js</code>. </p>
  
  <p><code>View.js</code>:</p>
  
  <pre><code>const Example = (props) =&gt; {
      console.log(props);
      return (
          &lt;div&gt;
              &lt;TopBar /&gt;
              &lt;DeploymentsHeader env={props.match.params.env} /&gt;
              &lt;PendingDataTable env={props.match.params.env} /&gt;
              &lt;DataTable env={props.match.params.env} /&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>Now for the <code>DataTable</code> component, a react-table is being rendered.  When a user clicks on an individual row, my goal is to have a modal pop up (still unclear to me whether or not this needs to have its own separate component if I'm using React portals) and have it be populated with data that is already bound to the individual row (which I tested and have access too).</p>
  
  <p>The code looks something like this:</p>
  
  <pre><code>&lt;ReactTable
     data={tableData}
     filterable={true}
     getTrProps={this.onRowClick}
         columns={[
            {
              Header: "Header",
              accessor: "service_name"
             },
             ...
             ]}
  /&gt;
  </code></pre>
  
  <p>Now this is the function that gets passed to the table row props and executes on click:</p>
  
  <pre><code>onRowClick = (state, rowInfo) =&gt; {
          return {
              onClick: e =&gt; {
                  console.log('A Tr Element was clicked!');
                  console.log(rowInfo.original);
              }
          }
      }
  </code></pre>
  
  <p>The data that I need is readily available to me in the object <code>rowInfo.original</code>.  Now my question is: what is considered the 'correct' or 'best-practice' way to load a modal using a portal when an event such as this onClick trigger executes? </p>
  
  <ol>
  <li>Do I need to have a separate <code>Modal.js</code> component that is actually a portal?</li>
  <li>How do I get the data from this <code>onRowClick</code> function transported to this modal portal?</li>
  </ol>
  
  <p>Thanks everyone. </p>