I have a fun little game that I've been working on. Check it out - here
In my game, when you hover over a square, it turns blue. If you hover over it again, it turns white. I achieve this by applying styles to the event target on hover.
const handleMouseEnter = (e) => {
const hoveredDiv = e._targetInst.pendingProps.value;
e.target.className = 'blue'
if (hoveredSquares.includes(hoveredDiv)) {
dispatch(actions.removeFromHovered(hoveredDiv))
e.target.style.backgroundColor = 'white';
} else {
dispatch(actions.addToHovered(hoveredDiv))
e.target.style.backgroundColor = 'blue';
}
}
However, I encountered an issue when I tried to change the game mode to 10x10. I needed to make all squares white again, essentially restarting the game. Even though the previously hovered squares remained blue. Here's the code for the squares:
const generateSquares = () => {
if (!currentMode || currentMode === 0) {
return
}
const array = Array.from(Array(currentMode), () => Array(currentMode).fill(currentMode))
return (
<Box style={{ marginTop: 20 }}>
{array.map((rowEl, rowIndex) => {
return (
<Box
key={rowIndex}
>
{rowEl.map((_, colIndex) => {
return (
<Box
value={`row ${rowIndex + 1} col ${colIndex + 1}`}
onMouseEnter={e => handleMouseEnter(e)}
key={colIndex}
></Box>
)
})}
</Box>
)
})}
</Box>
)
In Vanilla JS, I would have used querySelectorAll to control the styles of multiple elements. In React, however, I'm looking for a way to achieve this using hooks. Any suggestions would be greatly appreciated. Thank you!