title: React JS display clicked table row
body: <p>I am currently trying to learn react by building a simple app that works with a JSON array by calling a certain API. I would then like to show the results of the array in a table and have the ability to click one of the rows and get the data from that row to update another part of the page.</p>
  
  <p>I have successfully called the API and am showing the correct data in the table but I am struggling to figure out how to show the data after the click in another part of the page. I created a click handler event and can log information to the console but cant figure out how I would show this data on the page for the relevant row that is clicked.</p>
  
  <p>So I currently have this in my page:</p>
  
  <pre><code>&lt;div class="container"&gt;&lt;/div&gt;
  
  &lt;script type="text/jsx"&gt;
  
      var ShowData = React.createClass({
  
            getInitialState: function() {
              return { data: [] };
            },
  
            componentDidMount: function() {
              $.get(this.props.source, function(data) {
                if (this.isMounted()) {
                  this.setState({
                      data: data
                  });
                }
              }.bind(this));
            },
  
            handleClick: function(i) {
              console.log('You clicked: ' + this.state.data[i].event + this.state.data[i].name);
            },
  
            render: function() {
              var self = this;
              return (
                  &lt;table className="m-table"&gt;
                      &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Event&lt;/th&gt;
                                  &lt;th&gt;Name&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                      &lt;tbody&gt;
                      {this.state.data.map(function(type, i){
                     return (
                          &lt;tr&gt;
                              &lt;td title="Type" onClick={self.handleClick.bind(this, i)} key={i}&gt;{type.event}&lt;/td&gt;
                              &lt;td title="Type"&gt;{type.name}&lt;/td&gt;
                          &lt;/tr&gt;
                      )
                  })}
  
                          &lt;/tbody&gt;
                      &lt;/table&gt;
              );
            }
  
          });
  
    React.render(
            &lt;ShowData source="url of api" /&gt;,
            document.getElementById('container')
          );
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Below this script is another container that I would like to show the results when the table row is clicked.</p>
  
  <p>So to summarize, I want to display the data from the API call in a table, upon clicking on one of the table rows I want to take the table row data and format it in another container on the page.</p>