React.js - Creating simple table

Question

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 id="simple-board">         <tbody>           <tr id="row0">             <td id="cell0-0"></td>             <td id="cell0-1"></td>             <td id="cell0-2"></td>           </tr>           <tr id="row1">             <td id="cell1-0"></td>             <td id="cell1-1"></td>             <td id="cell1-2"></td>           </tr>           <tr id="row2">             <td id="cell2-0"></td>             <td id="cell2-1"></td>             <td id="cell2-2"></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.

Answer 1

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 id="simple-board">                <tbody>                  {rows}                </tbody>              </table>           </div>         </div>       </div>     )   } } 

Thanks all for responding!

Answer 2

One 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: https://material-ui.com/demos/tables/