[FIXED] How to recursively add React components to the DOM?

Issue

I'm new to React and I can't figure out how to add nested components to the DOM recursively (in fact I'm starting to suspect this may not even be possible, the way I'm thinking anyways). So here is the actual scenario: I'm trying to render a game board that's basically just a 12x12 grid-space. Now this is easily done like so (using React-Bootstrap btw):

<Container>
    <Row>
        <Col></Col>
        <Col></Col>
        <Col></Col>
        <Col></Col>
        <Col></Col>
        <Col></Col>
        <Col></Col>
        <Col></Col>
        <Col></Col>
        <Col></Col>
        <Col></Col>
        <Col></Col>
    </Row>
    <Row>
        <Col></Col>
        <Col></Col>
        <Col></Col>
        <Col></Col>
        <Col></Col>
        <Col></Col>
        <Col></Col>
        <Col></Col>
        <Col></Col>
        <Col></Col>
        <Col></Col>
        <Col></Col>
    </Row>
...x6 (you get the point)
</Container> 

Yikes! What a mess! Shirley, there MUST be a cleaner, DRYer way of doing this? Only problem is I can't seem to figure it out. Here is the current iteration of one of many implementations I've tried:

const GameBoard = () => {
    let boardLayout = () => {
        let board = ``;
        for (let i = 1; i <= 12; i++) {
            let row = `<Row>`;
            for (let j = 1; j <= 12; j++) {
                if ((i == 1 || i == 12) && (j == 1 || j == 12)) {
                    row.append(`<Col><BaseTile /></Col>`)
                }
                row.append(`<Col><GrassTile /></Col>`)
            }
            row.append(`</Row>`)
            board.append(row)
        }
        return board;
    }
  return (
    <Container>{boardLayout}</Container>
  );
}

Of course the above code doesn't work. But I'm now out of ideas, and anytime I try to search through the documentation or lookup tutorials, I come away with more questions than answers.

Solution

It's far easier to use CSS Grid for this. You only need one loop in which you switch between the components depending on the configuration. In this example I'm just toggling between "grass" and "base" classes depending on the index value.

For a 12x12 grid change the row/column props being passed into Grid from 5 to 12, and update the grid-template-columns details in the CSS to match.

function Grid({ rows, columns }) {

  function buildGrid(rows, columns) {
    const grid = [];
    for (let i = 1; i <= rows * columns; i++) {
      const type = i % 2 === 0 ? 'grass' : 'base';
      const classes = `box ${type}`;
      grid.push(<div className={classes}>{i}</div>);
    }
    return grid;
  }

  return (
    <div className="grid">
      {buildGrid(rows, columns)}
    </div>
  );

}

ReactDOM.render(
  <Grid rows="5" columns="5" />,
  document.getElementById('react')
);

.grid { display: grid; grid-template-columns: repeat(5, 40px); gap: 5px;}
.box { display: flex; border: 1px solid #676767; height: 40px; width: 40px; justify-content: center; align-items: center; }
.base { background-color: #efefef; }
.grass { background-color: LightGreen; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answered By - Andy

Answer Checked By - Candace Johnson (PHPFixing Volunteer)