# 1 - Simple Counter App

### **Description**

Create a React application that displays a simple counter. The counter should initially display 0 and have two buttons to increment or decrement the count. The count should update accordingly when a button is clicked.

### **Algorithm**

1. Initialize a state variable to store the count, set to 0.
2. Render the current count to the screen.
3. Create two buttons for incrementing and decrementing the count.
4. Define functions to update the state variable when a button is clicked.
5. Attach these functions to the respective button's onClick event.

### Classes

`Counter`: A React component that manages the count state and renders the count and buttons.

### **Code**

```javascript
import React, { useState } from 'react';

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

  const handleIncrement = () => {
    setCount(count + 1);
  };

  const handleDecrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>+</button>
      <button onClick={handleDecrement}>-</button>
    </div>
  );
}

export default Counter;

```

### **Explanation**

The code defines a `Counter` component that utilizes the `useState` hook to initialize a state variable `count` to 0. Two functions, `handleIncrement` and `handleDecrement`, are defined to update the `count` state variable. The component renders the current `count` and two buttons. The `handleIncrement` and `handleDecrement` functions are attached to the respective button's `onClick` event, enabling the updating of the count when a button is clicked.

### Further Possible Enhancements

* Implement a limit to the count (e.g., prevent it from going below 0 or above a certain number).
* Display the count history or a list of previous counts.
* Allow users to input a custom increment or decrement value.
* Add a reset button to set the count back to 0.