# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://choubey.gitbook.io/react-coding-puzzles/1-simple-counter-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.