Why React App Not Rendering Matrix on Screen?

Question

1.Create a 3x3 matrix 2.When you click on a box - color should change to green 3.When you click on the last box, all colors should change to orange in sequence of their clicks (original clicks)

I'm working on a React application where I have a component called Matrix that is supposed to display a 3x3 matrix. However, I'm facing an issue where the matrix is not rendering on the screen when I run the application.

Here's the relevant code:

Matrix.js

import React, { useState } from "react"; // Import React

const Matrix = () => {
  const [boxes, setBoxes] = useState([
    ["white", "white", "white"],
    ["white", "white", "white"],
    ["white", "white", "white"]
  ]);

  const handleClick = (row, column) => {
    const newBoxes = [...boxes];
    newBoxes[row][column] = "green";
    setBoxes(newBoxes);
  };

  const handleLastBoxClick = () => {
    const newBoxes = [...boxes];
    for (let i = 0; i < boxes.length; i++) {
      for (let j = 0; j < boxes[i].length; j++) {
        newBoxes[i][j] = "orange";
      }
    }
    setBoxes(newBoxes);
  };

  return (
    <div>
      <h1>Matrix</h1>
      <div className="matrix">
        {boxes.map((row, i) => (
          <div key={i} className="row">
            {row.map((cell, j) => (
              <div
                key={j}
                className="cell"
                style={{ background: cell }}
                onClick={() => handleClick(i, j)}
              />
            ))}
          </div>
        ))}
      </div>
      <button
        onClick={() => handleLastBoxClick()}
        disabled={boxes[2][2] !== "green"}
      >
        Change all colors to orange
      </button>
    </div>
  );
};

export default Matrix;

App.js

import React from "react";
import Matrix from "./Matrix";

function App() {
  return (
    <div className="App">
      <Matrix />
    </div>
  );
}

export default App;

Checked for Errors: I opened the browser's developer console and looked for error messages in the console. No errors were reported.

Answer 1

Boxes are displaying in HTML, but divs are empty. You can see this by changing the style property to this:

style={{ backgroundColor: "red", width: "30px", height: "30px", borderStyle: "double" }}

Answer 2

You need to add a content to the deepest <div> so that it has something to render. Something like:

<div
  key={j}
  className="cell"
  style={{ background: cell }}
  onClick={() => handleClick(i, j)}
> {` `} {i} {j}</div> {/* this is the changed line */}

Otherwise it will render a matrix of empty divs, 0x0 pixels.

But better to use <table> to render such content:

<table className="matrix">
        {boxes.map((row, i) => (
          <tr key={i} className="row">
            {row.map((cell, j) => (
              <td
                key={j}
                className="cell"
                style={{ background: cell }}
                onClick={() => handleClick(i, j)}
              />
            ))}
          </tr>
        ))}
      </table>