# Hands-On - Simple Counter

## Goal : Build Lift State Up - Hands-On Simple Counter App

###  the step-by-step procedure to implement a simple Counter React App:

1. **Setup Your React Environment**: Make sure your development environment is set up with React. Use `create-react-app` or another method to scaffold a new React application.
2. **Install Bootstrap**: Use the following command to install Bootstrap:

   ```bash
   npm install bootstrap
   ```
3. **Import Bootstrap Styles**: Add the following import statement at the top of your `App.jsx` file or `index.js` file:

   ```jsx
   import 'bootstrap/dist/css/bootstrap.min.css';
   ```
4. **Create the Counter Component**:
   * Create a functional component named `Counter` that receives `count`, `onIncrement`, and `onDecrement` as props.
   * Add Bootstrap styles to the buttons for better appearance.
5. **Set Up the Parent Component**:
   * In the `App` component, use the <mark style="color:orange;">`useState`</mark> hook to manage the `count` state.
   * Define <mark style="color:green;">`handleIncrement`</mark> and <mark style="color:red;">`handleDecrement`</mark> functions to update the state when the buttons are clicked.
   * Pass these functions and the `count` state as props to the `Counter` component.

App.jsx

```jsx
// App.jsx
// Import required libraries
import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";

// Counter Component
function Counter({ count, onIncrement, onDecrement }) {
  return (
    <div className="text-center mt-5">
      <h1>Counter App</h1>
      <h2 className="my-4">Count: {count}</h2>
      <button
        className="btn btn-primary mx-2"
        onClick={onIncrement}
      >
        Increment
      </button>
      <button
        className="btn btn-danger mx-2"
        onClick={onDecrement}
      >
        Decrement
      </button>
    </div>
  );
}

// App Component (Parent)
function App() {
  const [count, setCount] = useState(0);

  // Handlers for increment and decrement
  const handleIncrement = () => setCount(count + 1);
  const handleDecrement = () => setCount(count - 1);

  return (
    <div className="container card border-3 ">
      <Counter
        count={count}
        onIncrement={handleIncrement}
        onDecrement={handleDecrement}
      />
    </div>
  );
}

export default App;

```

1. **Render and Test**:
   * Run your app using `npm start` and test the functionality of the increment and decrement buttons.

<figure><img src="/files/OP9LgRblZK0bEQmpTcTV" alt="" width="375"><figcaption></figcaption></figure>

This code will create a basic React Counter App with styled buttons using Bootstrap. Let me know if you'd like further assistance!


---

# 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://reactjs.koida.tech/react-state-and-styling/hands-on-simple-counter.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.