Hooks Ref

import React, { Component } from 'react';
import Header from './components/Header/Header';
import Wheel from './components/Wheel/Wheel';
import Buttons from './containers/Buttons/Buttons';
import Footer from './components/Footer/Footer';

import './App.css';

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            spin: false,
        };
        this.spinWheel = this.spinWheel.bind(this);
    }

    spinWheel = () => {
        console.log("claim button clicked from <App/> Component");
    };

    render() {
        return (
            <div className="App">
                <Header/>
                <Wheel/>
                <Buttons idSpin="spin-now" idClaim="claim-now" onClickClaim={() => this.spinWheel()} />
                <Footer/>
            </div>
        );
    }
}

export default App;
___________________________________________________________________________________________________________________________
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;