Why won't one of my components hide onclick using hooks?

user_11848625 0
Viewed 59

For the life of me I can't figure out why the Spin Now won't hide upon clicking it. It rightfully shows Claim Now upon clicking Spin Now but once Claim Now shows, I want the Spin Now to hide. I'm using hooks, what am I doing wrong?

import React, { useState } from 'react';
import SpinNowButton from '../../components/SpinNowButton/SpinNowButton';
import ClaimNowButton from '../../components/ClaimNowButton/ClaimNowButton';
import './Buttons.css';

const Buttons = () => {
    const [showSpin, setShowSpin] = useState(false);
    const [showClaim, setShowClaim] = useState(false);

    return(
        <div className="both-buttons">
            <SpinNowButton onClick={() => setShowClaim(true)}/>
            {showClaim ? <ClaimNowButton/> : null}
            {showSpin ? <SpinNowButton/> : null}
        </div>
    );
};

export default Buttons;
react-hooks reactjs javascript debugging
2 Answers

So you only need one piece of state to accomplish this, and you set it to the opposite of what the value was previously. Then the ternary components below will render one component if true, and the other if false.


Edit - I think this is closer to what you're looking for:

import React, { useState } from 'react';
import SpinNowButton from '../../components/SpinNowButton/SpinNowButton';
import ClaimNowButton from '../../components/ClaimNowButton/ClaimNowButton';
import './Buttons.css';

const Buttons = () => {
    const [showClaim, setShowClaim] = useState(false);

    const handleCLick = () => {setShowClaim(!showClaim)}

    return(
        <div className="both-buttons">
            {showClaim ? null : <SpinNowButton onClick{() => handleClick()}/>}
            {showClaim ? <ClaimNowButton onClick{() => handleClick()}/> : null}
        </div>
    );
};

export default Buttons;
user_100079350

An implementation which is flexible in adding more types such as claim/spin:

import React, { useState } from 'react';
import SpinNowButton from '../../components/SpinNowButton/SpinNowButton';
import ClaimNowButton from '../../components/ClaimNowButton/ClaimNowButton';
import './Buttons.css';

const Buttons = () => {
    const [shownItems, setShownItems] = useState(['spin']);

    return(
        <div className="both-buttons">
            {shownItems.contains('claim') && <ClaimNowButton onClick={() => setShownItems('spin')}/>}
            {shownItems.contains('spin') && <SpinNowButton onClick={() => setShownItems('claim')}/>}
        </div>
    );
};

export default Buttons;
user_2900360
Related