Sorry for what it appears to be a newbie question (been up working late and just got started with React) but I am trying to figure out how to just render a simple table with nxn dimension.
For instance, in my component, the render output would be something like this:
<table> <tbody> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table>where each row has it's own id , as well as each cell.
The initial state
constructor(props){ super(props); this.state = {size: 3} }is what set the size of the table.
What threw me of was how to implement a for loop inside the JSX.
15 Answers
After a good night sleep, I was able to figure it out:
import React, { Component } from 'react'
export default class Example extends Component { constructor(props){ super(props); this.state = {size: 3} } render(){ let rows = []; for (var i = 0; i < this.state.size; i++){ let rowID = `row${i}` let cell = [] for (var idx = 0; idx < this.state.size; idx++){ let cellID = `cell${i}-${idx}` cell.push(<td key={cellID} id={cellID}></td>) } rows.push(<tr key={i} id={rowID}>{cell}</tr>) } return( <div className="container"> <div className="row"> <div className="col s12 board"> <table> <tbody> {rows} </tbody> </table> </div> </div> </div> ) }
}Thanks all for responding!
1One option (move stuff out of render():
import React from 'react';
import SimpleListMenu from '../menu/SimpleMenuListMenu'; // < Material UI element
let rows = [ 'Setting One', 'Setting Two', 'Setting Three', 'Setting Four',
];
export default class MyTable extends React.Component { createTable = () => { let table = [] for (let i = 0; i < rows.length; i++) { let children = [] children.push(<td>{rows[i]}</td>, <td>{<SimpleListMenu />}</td>) table.push(<tr>{children}</tr>) } return table } render() { return( <table> {this.createTable()} </table> ) }
}Another option:
import React from 'react';
let id = 0;
function createData(option, type) { id += 1; return { id, option, type };
}
let rows = [ createData('Setting One', 'Private'), createData('Setting Two', 'Public'), createData('Setting Three', 'Group'), createData('Setting Four', 'Private'),
];
export default class MyTable extends React.Component { render() { return( <table> {rows.map(row => ( <tr key={row.id}> <td>{row.option}</td> <td>{row.type}</td> </tr> ))} </table> ) }
}See:
somthing like this :
<table> <tbody> {this.props.yourData.slice(0,this.state.size).map((item , index)=>{ return( <tr key={index} id={`row${index}`}> {item.felanBisar.map((item2,index2)=>{ return( <td id={`cell${index}-{index2}`}></td> ); })} </tr> ); })} </tbody> </table> private getRows(): any { let rows: any[] = []; if (this.state.data) this.state.data.map((element) => { rows.push(<tr> <td style={{border: '1px solid black'}}> {element.title} </td> </tr>); }); return rows; } render( ) { return <div> <table style={{border: '1px solid black'}}> {this.getRows()} </table> </div> }Building the table from an array with a function, and rows with alternate bgColor:
function buildTable(arr){ const rows = arr.map((row,i) => { return <tr style={{backgroundColor: i%2 ? '#F0FFF2':'white'}} key={i}> <td>{row[0]}</td><td>{row[1]}</td> </tr> }) return <table><tbody>{rows}</tbody></table>
}
const data = [["FieldA", "aaa"],["FieldB", "bbb"],["FieldC", "ccc"]];
buildTable(data);
