Showing posts with label Render Parent and Child Element using For Loop. Show all posts
Showing posts with label Render Parent and Child Element using For Loop. Show all posts

Tuesday, March 3, 2020

Render Parent and Child Element using For Loop

export default class myHTMLTable extends React.Component {

  createTable = () => {
    let table = []

    // Outer loop to create parent
    for (let i = 0; i < 3; i++) {
      let children = []
      //Inner loop to create children
      for (let j = 0; j < 5; j++) {
        children.push(<td>{`Column ${j + 1}`}</td>)
      }
      //Create the parent and add the children
      table.push(<tr>{children}</tr>)
    }
    return table
  }


  render() {
    return(
      <table>
        {this.createTable()}
      </table>
    )
  }

}

Popular Posts