React - Create nested components with loops

Question

I have a little issue with React. I can\'t create a nested component with a for loop. What I want to do is create 9 cells of a table and then create 3 rows with 3 cells for

Answer 1

Here is the best I could think of after reading answers here and in Loop inside React JSX :

  render() {
    return (
      <div>
        {
          [...Array(3)].map((_, i) => (
            <div key={i} className="board-row">
              {
                [...Array(3)].map((_, j) => this.renderSquare(3 * i + j))
              }
            </div>
          ))
        }
      </div>
    );
  }

P.S. I'm also doing the challenges in the new React Tutorial. =p

Answer 2

The first solution:

import React from 'react';
import Square from './Square';

export default
class Board extends React.Component {
  render() {
    const board2 = [];

    for (let i = 0; i < 3; i++) {
      const s = [];
      for (let k = 0; k < 3; k++) {
        s[k] = <Square
          key     ={3*i+k}
          value   ={this.props.squares[3*i+k]}
          onClick ={()=>this.props.onClick(3*i+k)}
          />;
      }
      board2[i] = <div className="board-row" key={i}>{s}</div>;
    }
    ///////////////////////////////////////
    return (
      <div>{board2}</div>
    );
  }
}

The second solution:

import React from 'react';
import Square from './Square';

export default
class Board extends React.Component {
  render() {    
    let board   =Array(3).fill(null);
    let square  =Array(3).fill(null);

    const x = board.map((b,bIndex)=>{
      return<div className="board-row" key={bIndex}>
        {
          square.map((s, sIndex)=>{
            return <Square
            key     ={3*bIndex+sIndex}
            value   ={this.props.squares[3*bIndex+sIndex]}
            onClick ={()=>this.props.onClick(3*bIndex+sIndex)}
            />;
          })
        }
      </div>;
    });
    ///////////////////////////////////////
    return (
      <div>{x}</div>
    );
  }
}

Square:

import React from 'react';

export default
function Square(props) {
  console.log('square render')
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

Answer 3

This snippet uses map in a way similar to how we define a nested loop.

const buildBoard = [0,1,2].map((row)=>{
      return (
        <div className='board-row' key={row}>
          {
            [0,1,2].map((col)=>{
              return (
                this.renderSquare(row*3+col)
              )
            })
          } 
        </div>
      )
    });

return (
      <div id ='Board Container'>
        {buildBoard}
      </div>

    );

Answer 4

My solution is:

class Board extends React.Component {

    //range is a Sequence generator function
    //Array.from(arrayLike[, mapFn [, thisArg]]).
    //arrayLike - An array-like or iterable object to convert to an array
    //mapFn - Map function to call on every element of the array
    //thisArg - Value to use as this when executing mapFn
    //range(0, 4, 1);  => [0, 1, 2, 3, 4] 

    range = (start, stop, step) => Array.from(
        { length: (stop - start)/step +1 }, 
        (_, i) => start + (i * step)
    );

    renderSquare(i) {
        return <Square 
            key={i}
            value={this.props.squares[i]} 
            onClickChange={() => this.props.onClickChange(i)} 
            />;
    }

    render() {
    let row = 3;
    let col = 3;
    return (
        <div>
            {
                //This generates an Array of [0, 3, 6] if row = 3 and col = 3
                // n is the element and i is the index of the element, i starts at 0
                this.range(0, row * col - 1, col).map( (n, i) => {
                    return (
                        <div key={i} className="board-row">
                            {
                                this.range(n, (i + 1) * col - 1, 1).map( (n, i) => {
                                return this.renderSquare(n)
                                })
                            }
                        </div>
                    )
                })
            }
        </div>
    );
}

Answer 5

Here's my solution. It may help.

renderSquare(i) {
    return (
      <Square
        key={i}
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)}
      />
    );
  }

  render() {
    
    let rows = [];
    for (let i = 0; i <= 2; i++) {
      let children = []

      for (let j = i * 3; j <= i * 3 + 2; j++) {
        children.push(this.renderSquare(j))
      }

      rows.push(
        <div key={i} className="board-row">
          {children}
        </div>
      )
    }

    return (
      <div>
        {rows}
      </div>
    );
  }

Answer 6

class Board extends React.Component {
  renderSquare(i) {
    return (<Square key={i} value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />);
  }

  render() {
    let board = [];
    for(let x = 0; x<3; x++){
      let lis =[];
      for(let y = 0; y<3; y++){
        lis.push(this.renderSquare(3*x + y));
      }
      board.push(<div key={x}>{lis}</div>)
    }
    return (
      <div>
        {board}
      </div>
    );
  }
}