'not adding css for changing id - reactjs

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.

javascriptcssreactjs


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Juzer Zarif

Related Questions