title: Create a div beneath a table row when clicking that row with mapped data
body: <p>I have a table being populated by rows mapped by an array. I want to have an expanded view (or div) of data when I click a button in that row. I run into an issue where I can't have two table rows in the same .map iteration.</p>
  
  <p>I'm thinking there are multiple ways of doing this.</p>
  
  <p>I could swap a table row for a row that spans the width of the table with a div inside of it, using an if statement tied to the id the of the event I want to expand. </p>
  
  <p>I could jquery a div underneath the table row (not sure how to accomplish this).</p>
  
  <pre><code>&lt;tbody className={loading}&gt;
        {this.state.events.map((event, id) =&gt; 
          &lt;tr key={event.id}&gt;
            &lt;td&gt;{event.data || ' '}&lt;/td&gt;
            &lt;td&gt;{event.otherData}&lt;/td&gt;
            &lt;td&gt;&lt;TimeStamp time={event.timestamp} /&gt;&lt;/td&gt;
            &lt;td&gt;&lt;button onClick={() =&gt; this.onShowInfo(event)}&gt;
              &lt;i className="fa fa-search-plus" /&gt;&lt;/button&gt;&lt;/td&gt;
          &lt;/tr&gt;
        )}
      &lt;/tbody&gt;
  </code></pre>
  
  <p>JSX makes it impossible to have two rows rendered in a map function</p>