I want to display a grid of 50 x 50 cells. I created a cell, board and game component. The cell component is not rendering inside the board component so I just see a blue screen. I am new to react. Please I just want to understand and learn. Thank you

Cell Component:

export default function Cell({ value, colour, rowIndex, colIndex, clickAction }) {
      return (
        <div
          onClick={(e) => clickAction(e, rowIndex, colIndex)}
          style={{
            border: '1px solid black',
            display: 'flex',
            placeContent: 'center center',
            alignItems: 'center',
            backgroundColor: colour,
          }}
        >{value}
        </div>
      )
}

Board Component:

import '../App.css'

export default function Board({ row, column, pix }) {
      return (
        <div style={{
          display: 'grid',
          gridTemplateColumns: `repeat(50, 25px)`,
          gridTemplateRows: `repeat(50, 25px)`,
        }}>
        </div>
      )
}

Game Component:

import Cell from './Components/Cell'
import Board from './Components/Board'
import { useState } from 'react'
import './App.css'

export default function Game() {
      const boardDimensions = {
        width: 50,
        height: 50
      }
    
      const array2D = Array(boardDimensions.height).fill().map((row) => Array(boardDimensions.width).fill(0))
      const [fiboCells, setFiboCells] = useState(array2D)
    
      return (
        <div className="center">
          <Board row={50} column={50} pix={25}>
            {
              fiboCells.map((row, i) => row.map((col, j) => (
                <Cell
                  value={col}
                  rowIndex={i}
                  colIndex={j}
                  colour="red"
                />
              )))
            }
          </Board>
        </div>
      )
}

App Component:

import './App.css';
import Game from './Game'

function App() {
      return (
        <Game/>
      );
}

export default App;

App.css:

.center {
  display: flex;
  place-content: center center;
  align-items: center;
  flex-direction: column;
  background-color: #00308F;
  height: 100vh;
  font-size: 12px;
}

I expect to see a 50 x 50 grid of zeros

>Solution :

Since you are passing Cells as children of the Board component, the board component should be like this

import '../App.css'

export default function Board({ row, column, pix, children }) {
      return (
        <div style={{
          display: 'grid',
          gridTemplateColumns: `repeat(50, 25px)`,
          gridTemplateRows: `repeat(50, 25px)`,
        }}>
            {children}
        </div>
      )
}