---
name: react-state-counter
description: Creates a basic React component with state management for incrementing a counter.
version: "1.0.0"
specialist: Frank
governance: OPEN
---

# React State Counter Component

This skill provides a basic React component that uses the `useState` hook to manage and increment a numerical counter.

## Implementation

1.  **Import `useState`:**

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

2.  **Define the Component:**

    ```javascript
    function Counter() {
      // Initialize state with a default value of 0
      const [count, setCount] = useState(0);

      // Function to increment the counter
      const increment = () => {
        setCount(count + 1);
      };

      return (
        <div>
          <p>Count: {count}</p>
          <button onClick={increment}>Increment</button>
        </div>
      );
    }

    export default Counter;
    ```

## Usage

1.  **Import the Component:**

    ```javascript
    import Counter from './Counter'; // Adjust path as needed
    ```

2.  **Render the Component:**

    ```javascript
    function App() {
      return (
        <div>
          <Counter />
        </div>
      );
    }

    export default App;
    ```

## Explanation

*   `useState(0)`:  Initializes a state variable `count` to 0.  `useState` returns an array containing the current state value (`count`) and a function to update it (`setCount`).
*   `increment()`:  This function is called when the button is clicked. It uses `setCount` to update the `count` state, triggering a re-render of the component.


---
*Provisioned by Rigstate CLI. Do not modify manually.*