conditional button visibility with react hooks-CodePudding

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>

CodePudding user response：

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>
}