The title pretty much sums it up. I want to remove a className from an element once a button is pressed, and for this, I have tried using useState hooks, a regular function and I'm using onClick on the button to call this function/setUseState, but the className list is still the same. Here is a sample of my code:
function TileBoard() {
const [openTileVisible, setOpenTileVisible] = useState(true);
const [shuffler, setShuffler] = useState(0);
const yellowTileIds = [9, 10, 11, 12, 15, 23, 24, 25, 33, 36, 37, 38, 39];
let initialTiles = [];
for (let i = 0; i <= 48; i++) {
if (i === 48) {
initialTiles.push(<Tile key={i} number={i} id={'openTile'} className={openTileVisible ? 'tile-black tile' : 'tile'}/>);
} else {
if (yellowTileIds.includes(i)) {
initialTiles.push(<Tile key={i} number={i} className={'tile-yellow tile'}/>);
} else {
initialTiles.push(<Tile key={i} number={i} className={'tile-black tile'}/>);
}
}
}
const [tiles, setTiles] = useState(initialTiles);
return (
<div className={'game'}>
<div key={shuffler} className={'board'}>
<div className={'tiles'}>
{tiles}
</div>
</div>
<button onClick={() => {
setOpenTileVisible(false);
shuffleArray();
}}>SHUFFLE</button>
</div>
);
}
For some reason, this does not remove the class, even though the useState gets changed. Have I done something wrong with the className attribute when I create the object?
Here is shuffle method:
function shuffleArray() {
let array = tiles;
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
const temp = array[i];
array[i] = array[j];
array[j] = temp;
}
console.log(array);
setTiles(array);
// Using this to force the Rerender, since React doesn't count
// change in element order in array as a reason to rerender.
setShuffler(shuffler + 1);
}
Make tiles the computed (and memoized) value of useMemo instead of using it as state, this updates the value when the dependencies change.
import React, { useMemo } from "react";
const tiles = useMemo(() => {
const tiles = [];
for (let i = 0; i <= 48; i++) {
if (i === 48) {
tiles.push(
<Tile
key={i}
number={i}
id={"openTile"}
className={openTileVisible ? "tile-black tile" : "tile"}
/>
);
} else {
if (tiles.includes(i)) {
tiles.push(
<Tile key={i} number={i} className={"tile-yellow tile"} />
);
} else {
tiles.push(<Tile key={i} number={i} className={"tile-black tile"} />);
}
}
}
return tiles;
}, [openTileVisible, shuffler]);
let array = tiles;
With this assignment, array is always referred to as the same tiles array which does go against the immutability rule in React.
Along with it, I'd suggest you use React.cloneElement() to clone your tile components that help to force re-rendering your tiles too.
You should modify it like below
function shuffleArray() {
let array = [...tiles]; //assign a new tiles' array
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
const temp = array[i];
array[i] = React.cloneElement(array[j]); //clone your tile
array[j] = React.cloneElement(temp); //clone your tile
}
console.log(array);
setTiles(array);
//setShuffler(shuffler + 1); //you don't need to use it anymore because the array modification has been forcing the re-rendering
}