Counter Buttons Use React.js

 we'll show you how to create a simple counter app using React. The app will have two buttons: one to increment the counter and one to decrement it. You'll learn how to use the useState hook to manage state in your component, how to handle events like button clicks, and how to render dynamic content.

Source Code:

React.js file:

import { useState } from "react";

import React from "react";

import './component1.css';

function Counter(){

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

  const increment=()=>{

    setCount(count +1);

  };

  const decrement=()=>{

    setCount(count -1);

  }

  return(

    <div>

      <h1>{count}</h1>

      <button onClick={increment}>Increment</button>

      <button onClick={decrement}>Decrement</button>

    </div>

  );

}

export default Counter;

component1.css:

div{

  display: flex;

  flex-direction: column;

}

button{

  padding: 10px;

  background-color: rgb(82, 82, 251);

  width: 100px;

  margin: 10px;

  border-radius: 12px;

  border: none;

  color: black;

  cursor: pointer;

}

button:hover{

  background-color: rgb(6, 6, 110);

  border-color: black;

  color: white;

}

h1{

  color: red;

  margin: 10px;

}

output: