Hooks Ref

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

const Buttons = (props) => {
    const [showClaim, setShowClaim] = useState(false);
    const clickEl = useRef(null);

    const handleClick = () => {
        setShowClaim(!showClaim);
        console.log("spin button clicked from <Button/> component");
    };

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

            <a href="#" onClick={props.onClickClaim}>
                {showClaim ? <ClaimNowButton /> : null}
            </a>
        </div>
    );
};

export default Buttons;