react counter app

App.js

=>

import react,{useState} from 'react'

const App = () =>{

  const [counter, setCounter]=useState(0);

  const handleClick = (key) =>{

    if(key==="increase"){

      setCounter(counter+1)

    }else if(key==="set0"){

      setCounter(0)

    }else if(key==="decrease"){

      counter>0?setCounter(counter-1):setCounter(0)

    }

  }

  return (

    <div className="app">

      <h2>{counter}</h2>

      <div>

        <button onClick={()=>handleClick("increase")}>Increase</button>

        <button onClick={()=>handleClick("set0")}>Set 0</button>

        <button onClick={()=>handleClick('decrease')}>Decrease</button>        

      </div>

    </div>

  )

}

export default App

Index.css

=>*{

  margin: 0;

}

.app{

display: grid;

justify-items: center;

margin-top: 50px;

}

.app > h2{

  font-weight: 600;

  font-size: 35px;

  margin-bottom: 50px;

}

.app > div>button:nth-child(even){

  background-color:red;

  padding: 15px;

  width: 150px;

  margin: 15px;

  color: white;

  font-weight: 600;

}

.app > div>button:nth-child(odd){

  background-color:red;

  padding: 15px;

  width: 150px;

  margin: 15px;

  color: white;

  font-weight: 600;

}