CODEWITHSUNDEEP
javascripthtmlreactjsreact-hooks
George Marwanqana
George Marwanqana

Reputation: 419

How to get all buttons disabled, when one button is clicked in react?

I want to create a simple game that allows users to pick a card, and reveal if the player has won a price or not. I want when the user clicks the card, to reveal a message if they won or not, but make sure that after one card is clicked, all buttons are disabled and the player cannot click/reveal the other 2 components/card message. 1. I cannot get the button to disable the other buttons when its clicked. 2. I'm struggling to make sure that the winning card is different each time. Here's my code

CSS:

.cards{
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20vh;
}

[class*=cardDisplay]{
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    background: black; 
    color: white;
    margin: auto;
}

[class*=card-content]{
    display: none;
}

[class*=card-content-2]{
    display: block;
}

React


function Card({className, children}) {
    const [styling, setStyling] = useState("card-content");
    

    const handleClick = (e) => {
        setStyling("card-content-2")
        e.target.setAttribute('disabled', 'disabled')
       
    };

    return (
        <div className={`cardDisplay ${className}`} >
            <p className={styling}>{children}</p>
            <button type="button"  onClick={handleClick}>
              Click
            </button>
        </div>
    );
};

function Game() {

    return (
        <div className="cards">
            <Card className="card-1" children="win" onClick/>
            <Card className="card-2" children="Sorry, no win"/>
            <Card className="card-3" children="Sorry, no win"/>
        </div>
    );
}

Upvotes: 0

Views: 1122

Answers (1)

tomashauser
tomashauser

Reputation: 571

You need to use state that holds the information whether or not all cards should be disabled. Then, pass a function to the card, that flips this state.

function Game() {
    const [cardsDisabled, setCardsDisabled] = useState(false);

    const disableAllCards = () => setCardsDisabled(true);

    return (
        <div className="cards">
            <Card className="card-1" 
                  children="win" 
                  isDisabled={cardsDisabled} 
                  disableAllCards={disableAllCards}/>
            <Card className="card-2"
                  children="Sorry, no win"
                  isDisabled={cardsDisabled}
                  disableAllCards={disableAllCards}/>
            <Card className="card-3"
                  children="Sorry, no win"
                  isDisabled={cardsDisabled}
                  disableAllCards={disableAllCards}/>
        </div>
    );
}

function Card({className, isDisabled, disableAllCards, children}) {
    const [styling, setStyling] = useState("card-content");
    

    const handleClick = (e) => {
        disableAllCards();
    };

    return (
        <div className={`cardDisplay ${className}`} >
            <p className={styling}>{children}</p>
            <button type="button"
                    disabled={isDisabled} 
                    onClick={handleClick}>
              Click
            </button>
        </div>
    );
};

You can then select the disabled property in CSS by using card:disabled {...}.

Upvotes: 1

Related Questions