React state not changing using immer package

Question

So I'm incredibly confused, basically the tile should turn grey when I click on them but it's not. I'm pretty sure I did this correctly unless there's something I'm missing in the way I set the type in the first place. What's even weirder is sometimes when I go to manually change the state through the extension, all of a sudden (just for the single tile I manually changed the state for), the onClick works perfectly. Any help is appreciated, thank you!

import React, { useEffect, useState } from 'react';
import produce from 'immer';
import { Node } from './astar';

export default function Grid(): JSX.Element {
  const [grid, setGrid] = useState<Node[][]>([]);
  const numCols = 50;

  useEffect(() => {
    let tempGrid: Node[][] = [];
    for (let i = 0; i < numCols; i++) {
      tempGrid.push([]);
    }

    for (let i = 0; i < tempGrid.length; i++) {
      for (let j = 0; j < tempGrid.length / 2; j++) {
        let node = new Node(i, j, false);
        tempGrid[i][j] = node;
      }
    }
    setGrid(tempGrid);
  }, []);

  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${numCols}, 20px)` }}>
      {grid.map((rows, i) => {
        return (
          <div key={i}>
            {rows.map((cols, j) => {
              return (
                <div
                  key={j}
                  onClick={() => {
                    const newGrid = produce(grid, (tempGrid) => {
                      tempGrid[i][j].isWall = !tempGrid[i][j].isWall;
                    });
                    setGrid(newGrid);
                    console.log(grid[i][j]);
                  }}
                  style={{ width: '20px', height: '20px', border: '1px solid black', backgroundColor: grid[i][j].isWall ? '#A9A9A9' : '#FFFFFF' }}
                ></div>
              );
            })}
          </div>
        );
      })}
    </div>
  );
}

The Node Class

class Node {
  x: number;
  y: number;
  isWall: boolean;

  constructor(x: number, y: number, isWall: boolean) {
    this.x = x;
    this.y = y;
    this.isWall = isWall;
  }
}

export { Node };

even when I click it still doesn't change the state.

Answer 1

Your Node class needs to be marked with immerable to make them compatible with Immer:

import {immerable} from "immer"

class Node {
  [immerable] = true; //Add this line

  x: number;
  y: number;
  isWall: boolean;

  constructor(x: number, y: number, isWall: boolean) {
    this.x = x;
    this.y = y;
    this.isWall = isWall;
  }
}

export { Node };

https://immerjs.github.io/immer/complex-objects