React.js creates a table with a dynamic number of rows with an editable column

Question

I am trying to create a react.js table that synchronizes with the booklet map. I have this data and I can get the data correctly, but I cannot create the table correctly. I can see the headers because they are hardcoded, but I can not see the lines. I also have an image to explain the data at console.log () points in the code. Here is the 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 < 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(<tr Population={zone.population} Zone={zone.name} />); }.bind(this)); console.log(rows); return ( <table> <thead> <tr> <th>Zone</th> <th>Population</th> </tr> </thead> <tbody>{rows}</tbody> </table> ); } }); 

Here you can see the string console.log(tabledata) in full, as well as the first object in console.log(rows)

I would like to see something like the picture below. Please note: I want the "Zone" column not to be an editable input, but the population should be editable:

Answer 1

<tr Population={zone.population} Zone={zone.name} /> for me is not like a valid React component. The <tr> indicates that this is not a custom component, but rather a standard HTML table row. <tr> elements require inside <td> or <th> elements, for example:

 var rows = []; this.state.zones.forEach(function(zone) { rows.push( <tr /> <td><SomePopulationComponent /></td> <td><SomeZoneComponent /></td> </tr> ); }.bind(this)); 

You can extract this into a custom element:

 var CustomRow = React.createClass({ render: function() { return ( <tr> <td>{this.props.Population}</td> <td>{this.props.Zone}</td> </tr> ); } }); // ... var rows = []; this.state.zones.forEach(function(zone) { rows.push(<CustomRow Population={zone.population} Zone={zone.name} />); }.bind(this)); 

Also, don't forget to specify elements created from inside the map / foreach a key function.

Answer 2

 I have made this dynamic data table with dynamic rows and columns editable class App extends React.Component { constructor(props){ super(props); this.state = { data: [ {'id':1,1:'',2:'Class1',3:'Class2',4:'Class3',5:'Class4',6:'Class5',7:'Class6'}, {'id':2,1:'MONDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'}, {'id':3,1:'TUESDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'}, {'id':4,1:'WEDNESDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'}, {'id':5,1:'THURSDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'}, {'id':6,1:'FRIDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'} ], errorInput:'' }; this.submitStepSignupForm = this.submitStepSignupForm.bind(this); this.appendColumn = this.appendColumn.bind(this); // this.editColumn = this.editColumn.bind(this); render(){ let tableStyle = { align:"center" }; let list = this.state.data.map(p =>{ return ( <tr className="grey2" key={p.id}> {Object.keys(p).filter(k => k !== 'id').map(k => { return (<td className="grey1" key={p.id+''+k}><div suppressContentEditableWarning="true" contentEditable="true" value={k} onInput={this.editColumn.bind(this,{p},{k})}>{p[k]}</div></td>); })} </tr> ); }); return ( <fieldset className="step-4"> <div className="heading"> <h3>Tell us about your schedule</h3> <p>Dynamic Data Table by Rohan Arihant </p> </div> <div className="schedule padd-lr"> <table cellSpacing="3" id="mytable" style={tableStyle}> <tbody>{list}</tbody> </table> </div> </fieldset> ); } 

}

https://codepen.io/rohanarihant/pen/qmjKpj