React - Counter component with useState

Question

import React, { useState } from 'react';

const CounterComponent = () => {
  // Declare a state variable named 'count' with an initial value of 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
};

export default CounterComponent;

 

In this example, the component maintains a state variable called count, initialized to 0. The component renders a paragraph element displaying the current count and two buttons.

Each button has an onClick event handler that calls the setCount function to update the count state based on the current value.

Clicking the "Increment" button increases the count, while clicking the "Decrement" button decreases it. The component re-renders each time the state is updated, reflecting the changes in the UI.