> For the complete documentation index, see [llms.txt](https://api.beacon.li/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://api.beacon.li/callbacks-in-beacon/react-example-for-callbacks.md).

# React Example for Callbacks

In a React application, you can use callbacks from the `@beacon.li/bar` package to manipulate the state of your components based on specific events. This allows you to respond to events triggered by Beacon Bar and update your component's state accordingly.

#### Example: Using Callbacks to Update State

Here's an example of how to use callbacks to update the state of a React component:

```
import { Beacon } from '@beacon.li/bar';
import { useEffect, useState } from 'react';

function Component() {
    // Initialize a state variable
    const [state, setState] = useState(false);

    useEffect(() => {
        // Define a callback function
        const callback = (userId, metaData) => {
            // Update the state when the callback is triggered
            setState(true);
        };

        // Add the callback with a unique key
        Beacon.addCallback('your_callback_key', callback);

        // Clean up by removing the callback when the component unmounts
        return () => {
            Beacon.removeCallback('your_callback_key');
        };
    }, [setState]);

    // Render your component with the state
    return (
        <div>
            <p>State: {state ? 'True' : 'False'}</p>
        </div>
    );
}

export default Component;
```

In this example:

* We initialize a state variable called `state` using `useState`. This state will be updated when the callback is triggered.
* Inside the `useEffect` hook, we define a callback function that updates the state to `true` when it's called.
* We add the callback using `Beacon.addCallback('your_callback_key', callback)` with a unique key `'your_callback_key'`.
* To ensure cleanup when the component unmounts, we return a function that removes the callback using `Beacon.removeCallback('your_callback_key')`.
* Finally, we render the component with the state variable to display the current state.

This example demonstrates how to use callbacks from `@beacon.li/bar` to manipulate the state of a React component in response to specific events triggered by BeaconBar.