Question 246699 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why React App Not Rendering Matrix on Screen?

1.Create a 3×3 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 3×3 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.

Tags:

3

Answers


  1. 0

    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" }}
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    The app is working just fine, just make sure to add a width and a height to the cell class, as well as a border because you’re using the background color to be white at first so that’s why it might seem that they’re not rendering.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search