title: add row on button press React
body: <p>im trying to add a row to a table, on a click event. Here is my component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import PageContent from 'components/PageContent';
  import { IBox, IBoxTitle, IBoxContent } from 'components/IBox';
  import IBoxTools from 'components/IBoxTools';
  import Table from 'components/Table';
  
  export default class SalesChannelsPage extends Component {
      constructor(props) {
          super(props);
          this.addRow = this.addRow.bind(this);
      }
  
      render() {
          return (
              &lt;PageContent header="Salgskanaler"&gt;
                  &lt;IBox&gt; 
                      &lt;IBoxTitle&gt;
                          Salgskanaler
                          &lt;IBoxTools icon="fa fa-plus" title="Tilføj salgskanal" handleClick={() =&gt; this.addRow()}/&gt;
                      &lt;/IBoxTitle&gt;
                      &lt;IBoxContent&gt;
                          &lt;Table&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;td className="channel-name"&gt;Navn&lt;/td&gt;
                                      &lt;td className="channel-description"&gt;Beskrivelse&lt;/td&gt;
                                      &lt;td className="channel-btn"&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
  
                              &lt;/tbody&gt;
                          &lt;/Table&gt;
                      &lt;/IBoxContent&gt;
                  &lt;/IBox&gt;
              &lt;/PageContent&gt;
          );
      }
  
      addRow() {
          console.log('add row')
      }
  }
  </code></pre>
  
  <p>So everytime i click the button, a new row should be added, and it should be possible to add as many rows to the list as possible. here is the row i want to add.</p>
  
  <p>i realize that i could make an array in state and just put it there, but i have learned that only the data should be contained in the state. Some help would be much appreciated.
  Thx</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td className="channel-name"&gt;
          &lt;input className="form-control input-sm" type="text" placeholder="Navn..." /&gt;
      &lt;/td&gt;
      &lt;td className="channel-description"&gt;
          &lt;input className="form-control input-sm" type="text" placeholder="Beskrivelse..." /&gt;
      &lt;/td&gt;
      &lt;td className="channel-btn"&gt;
          &lt;div&gt;
              &lt;div className="btn btn-xs btn-danger"&gt;&lt;span className="fa fa-times"&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;div className="btn btn-xs btn-primary"&gt;&lt;span className="fa fa-floppy-o"&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>