incre decre react

 // import { useState } from 'react'

// import reactLogo from './assets/react.svg'

// import viteLogo from '/vite.svg'

// import './App.css'

// function App() {

//   const [count, setCount] = useState(0)

//   return (

//     <>

//       <div>

//         <a href="https://vitejs.dev" target="_blank">

//           <img src={viteLogo} className="logo" alt="Vite logo" />

//         </a>

//         <a href="https://react.dev" target="_blank">

//           <img src={reactLogo} className="logo react" alt="React logo" />

//         </a>

//       </div>

//       <h1>Vite + React</h1>

//       <div className="card">

//         <button onClick={() => setCount((count) => count + 1)}>

//           count is {count}

//         </button>

//         <p>

//           Edit <code>src/App.jsx</code> and save to test HMR

//         </p>

//       </div>

//       <p className="read-the-docs">

//         Click on the Vite and React logos to learn more

//       </p>

//     </>

//   )

// }

// export default App

import { useState } from 'react'

import reactLogo from './assets/react.svg'

import viteLogo from '/vite.svg'

import './App.css'

function App() {

  const [count, setCount] = useState(0)

  const increment = () => {

    setCount((prevCount) => prevCount + 4)

  }

  const decrement = () => {

    setCount((prevCount) => prevCount - 1)

  }

  return (

    <>

      <div>

        <h1>Counter</h1>

      </div>

      <div className="card">

        <button onClick={increment}>

          Increment by 4

        </button>

        <p>Count: {count}</p>

        <button onClick={decrement}>

          Decrement by 1

        </button>

      </div>

    </>

  )

}

export default App