title: React.js creating a table with a dynamic amount of rows with an editable column
body: <p>I am trying to create a react.js table that syncs with a leaflet map. I have this data and I am able to get the data properly, but I cannot create a table correctly. I am able to see the headers because they are hardcoded, but I am not able to see the rows. I also have a picture to explain the data at the console.log() points in the code. Here is the code:</p>
  
  <pre><code>/* Table React Component */
  var TABLE_CONFIG = {
    sort: { column: "Zone", order: "desc" },
    columns: {
      col1: { name: "Zone", filterText: "", defaultSortOrder: "desc" },
      col2: { name: "Population", filterText: "", defaultSortOrder: "desc" }
    }
  };
  
  var Table = React.createClass({
    getInitialState: function() {
      var tabledata = [];
      var length = _.size(testJSON.zones);
      for(i = 0; i &lt; length; i++) {
  
        var name = _.keys(testJSON.zones)[i];
  
        var population = testJSON.zones[name].population.value;
        if(name == "default") {
          population = testJSON.zones[name].population.default.value;
        }
  
        tabledata[i] = {name, population};
      }
      console.log(tabledata);
      return {zones: tabledata};
    },
  
    render: function() {
      var rows = [];
      this.state.zones.forEach(function(zone) {
          rows.push(&lt;tr Population={zone.population} Zone={zone.name} /&gt;);
      }.bind(this));
      console.log(rows);
      return (
          &lt;table&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Zone&lt;/th&gt;
                      &lt;th&gt;Population&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;{rows}&lt;/tbody&gt;
          &lt;/table&gt;
        );
    }
  });
  </code></pre>
  
  <p>Here you can see the <code>console.log(tabledata)</code> line in full as well as the first object in <code>console.log(rows)</code></p>
  
  <p><img src="https://i.stack.imgur.com/wTkbV.png" alt="Zone name and population"></p>
  
  <p>I would like to see something like the picture below. Please note I want to Zone column to not be editable input, but the population to be editable: </p>
  
  <p><img src="https://i.stack.imgur.com/0uk4h.png" alt="Desired Table"></p>