SHARE
TWEET

Hooks Ref

a guest Oct 15th, 2019 71 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import Header from './components/Header/Header';
  3. import Wheel from './components/Wheel/Wheel';
  4. import Buttons from './containers/Buttons/Buttons';
  5. import Footer from './components/Footer/Footer';
  6.  
  7. import './App.css';
  8.  
  9. class App extends Component {
  10.     constructor(props) {
  11.         super(props);
  12.  
  13.         this.state = {
  14.             spin: false,
  15.         };
  16.         this.actualWheel = React.createRef();
  17.         this.spinWheel = this.spinWheel.bind(this);
  18.     }
  19.  
  20.     spinWheel = () => {
  21.         console.log("claim button clicked from <App/> Component");
  22.     };
  23.  
  24.     render() {
  25.         return (
  26.             <div className="App">
  27.                 <Header/>
  28.                 <Wheel id="actual-wheelTwo" />
  29.                 <Buttons idSpin="spin-now" idClaim="claim-now" onClickClaim={() => this.spinWheel()} />
  30.                 <Footer/>
  31.             </div>
  32.         );
  33.     }
  34. }
  35.  
  36. export default App;
  37. ___________________________________________________________________________________________________________________________
  38. import React, { useState, useRef } from 'react';
  39. import SpinNowButton from '../../components/SpinNowButton/SpinNowButton';
  40. import ClaimNowButton from '../../components/ClaimNowButton/ClaimNowButton';
  41. import './Buttons.css';
  42.  
  43. const Buttons = (props) => {
  44.     const [showClaim, setShowClaim] = useState(false);
  45.     const clickEl = useRef(null);
  46.  
  47.     const handleClick = () => {
  48.         setShowClaim(!showClaim);
  49.         console.log("spin button clicked from <Button/> component");
  50.     };
  51.  
  52.     return(
  53.         <div className="both-buttons">
  54.             {showClaim ? null :
  55.                 <SpinNowButton onClick={() => handleClick()} ref={clickEl}/>
  56.             }
  57.  
  58.             <a href="#" onClick={props.onClickClaim}>
  59.                 {showClaim ? <ClaimNowButton /> : null}
  60.             </a>
  61.         </div>
  62.     );
  63. };
  64.  
  65. export default Buttons;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top