title: Dynamically displaying data from a clickable table row into a modal
body: <p>I'm attempting to create a component that consists of rows of data, which when clicked, open a modal with information relating to that table row. For example, when a user clicks on "team 1", a modal would appear showing a new table displaying each of the users assigned to that team.</p>
  
  <p>I've managed to achieve this using manually provided parameters, however I have no idea how to make the modal dynamically display data depending on which table row has been clicked. <a href="https://jsfiddle.net/69z2wepo/59000/#run&amp;togetherjs=aQkzvwDx4D" rel="nofollow">Here is a link to a jsfiddle that i've made to show my problem.</a></p>
  
  <pre><code>    getInitialState: function () {
      return {
        teams:[
          {
            id: '1',
            teamName: 'team 1',
            users: ['dave', 'steve', 'jim', 'barry', 'tom', 'harry']
          },
        ]
      };
  
  
      render: function () {
      var self = this;
      var projectsTable = this.state.teams.map(function (obj, index) {
        return (
          &lt;tr className="table-teamProject" key={index} data-toggle="modal" data-target="#projectUsersModal" data-id='3'&gt;
            &lt;div className="mCellsContainer"&gt;
              &lt;div className="mCellsNames"&gt;{obj.teamName}&lt;/div&gt;
              &lt;div className="mCellsCount"&gt;{obj.users.length} Users&lt;/div&gt;
            &lt;/div&gt;
          &lt;/tr&gt;
        );
      });
  
      var projectUsersModal = this.state.teams.map(function (obj, index) {
        return (
          &lt;div className="modal projectUsersModal fade" id="projectUsersModal" tabIndex={-1} role="dialog" aria-labelledby="myModalLabel"&gt;
            &lt;div className="modal-dialog" role="document"&gt;
              &lt;div className="modal-content"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
        );
      });
  
      return (
        &lt;div&gt;
          &lt;div className="projectsColContainer"&gt;
            &lt;div className="panel panel-default"&gt;
              &lt;div className="panel-heading"&gt;Projects&lt;/div&gt;
              &lt;table className="scroll-table"&gt;
                {projectsTable}
                {projectUsersModal}
              &lt;/table&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>