I'm making a game in react and I have a reset button but I want it to only appear when the user loses the game, I tried using the useState but i'm new to it and couldn't figure out how to do it.
the game over function :
function handleCellClick(x, y) {
let updatedData = [...boardData];
// check if revealed. return if true.
if (updatedData[x][y].isRevealed || updatedData[x][y].isFlagged)
return null;
// check if mine. game over if true
if (updatedData[x][y].isMine) {
setGameStatus("You Lost!");
revealBoard();
}
the reset function :
function refreshGame() {
setBoardData(initBoardData(props.height, props.width, props.mines));
setGameStatus("Game in progress");
setMineCount(10);
}
button :
<button onClick={refreshGame} className="btn-refresh btn-outline-danger">
Play Again?
</button>
</div>
you can use conditional rendering of button,
with logical AND (&&) it would be easy,
as you setting text setGameStatus("You Lost!"); we can extract out same logic to render button or not it would be decided
{
gameStatus === "You Lost!" &&
<button onClick={refreshGame} className="btn-refresh btn-outline-danger">
Play Again?
</button>
}