React.js creating a table with a dynamic amount of rows with an editable column <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>