I'm creating a popup in React js and have a div with a changing id based on a boolean gameOver.winner
Right now I have set gameOver.winner to true.
import React, { useContext } from 'react'
import { AppContext } from '../../../App'
import './GameOver.css'
const GameOver = () => {
const { currAttempt, setCurrAttempt, grid, setGrid, gameOver, setGameOver} = useContext(AppContext)
console.log(gameOver.winner)
return (
<div className="gameOver" ** id={gameOver.winner}> **
<div className="gameOverInner">
<h1>Game Over</h1>
<h2>{gameOver.winner ? "You Win!" : "You Lose!"} - {currAttempt.currRow}</h2>
</div>
</div>
)
}
export default GameOver
In GameOver.css I am calling this id
.gameOver[id=true]{
top: 0;
left: 0;
width: 25%;
background-color: rgb(41, 41, 41);
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
However, my output has no styling to it.
If gameOver.winner is a boolean, then it's not going to output a <div id="true"> node to the DOM. React doesn't accept boolean values for the id prop on intrinsic html elements (you should see an error in the browser console regarding it). If you want to add special styling to your div based on a boolean value, I'd suggest adding a class to it when gameOver.winner is true.
<div className={`gameOver ${gameOver.winner ? 'winner' : ''}`}>
Then in your css file you can target it with the selector .gameOver.winner.