import React, { useState, useEffect } from 'react'
import "../style.css";


export default function FunctionalComponent() {

    const [isShowing, setisShowing] = useState(true);
    const [myInterval, setMyInterval] = useState(null);

    let countDown = 0;


    let handleClick = () => {
        setisShowing(!isShowing);

        if (isShowing === true) {
            let start = () => {
                setInterval(increase, 1000);
            }

            let increase = () => {
                if (countDown < 100) {
                    countDown++;
                    console.log(countDown);
                }
            }
            setTimeout(start, 1000);
        }
        else {
            // clearInterval
        }

    }


    return (

        <React.Fragment>
            <h3>Functional Component</h3>
            <button onClick={handleClick} className="btn btn-danger">Toggle</button>
            {isShowing ? <p className="togglingText">Click toggle for vanishing me</p> : null}
        </React.Fragment>
    )
}