javascript - React.js - Creating simple table -

sorry appears newbie question (been working late , got started react) trying figure out how render simple table nxn dimension.

for instance, in component, render output 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 , each cell.

the initial state

  constructor(props){     super(props);     this.state = {size: 3}   } 

is set size of table.

what threw me of how implement loop inside jsx.

after night sleep, able figure out:

import react, { component } 'react'  export default class example extends component {   constructor(props){     super(props);     this.state = {size: 3}   }   render(){     let rows = [];     (var = 0; < this.state.size; i++){       let rowid = `row${i}`       let cell = []       (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 responding!