sazid_iiuc

Untitled

Mar 9th, 2021
424
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState, useEffect } from 'react'
  2. import "../style.css";
  3.  
  4.  
  5. export default function FunctionalComponent() {
  6.  
  7.     const [isShowing, setisShowing] = useState(true);
  8.     const [myInterval, setMyInterval] = useState(null);
  9.  
  10.     let countDown = 0;
  11.  
  12.  
  13.     let handleClick = () => {
  14.         setisShowing(!isShowing);
  15.  
  16.         if (isShowing === true) {
  17.             let start = () => {
  18.                 setInterval(increase, 1000);
  19.             }
  20.  
  21.             let increase = () => {
  22.                 if (countDown < 100) {
  23.                     countDown++;
  24.                     console.log(countDown);
  25.                 }
  26.             }
  27.             setTimeout(start, 1000);
  28.         }
  29.         else {
  30.             // clearInterval
  31.         }
  32.  
  33.     }
  34.  
  35.  
  36.     return (
  37.  
  38.         <React.Fragment>
  39.             <h3>Functional Component</h3>
  40.             <button onClick={handleClick} className="btn btn-danger">Toggle</button>
  41.             {isShowing ? <p className="togglingText">Click toggle for vanishing me</p> : null}
  42.         </React.Fragment>
  43.     )
  44. }
  45.  
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×