# React Component

The WireBootstrap React Component turns any WireBootstrap component into a React component.

```jsx
<WireComponent></WireComponent>
```

The WireBootstrap for React Component has two properties.

## component

Set the `component` property to the fully qualified class or function name of the WireBootstrap component to be rendered in the WireBootstrap React Component. &#x20;

The following example renders the [Select2 for WireBootstrap](https://www.wirebootstrap.com/products/select2.html) component as a React component.

```jsx
<WireComponent component="wire.select2"></WireComponent>
```

## config

Use the `config` property to set the configuration for the component. &#x20;

The following sets the [configuration for the Select2 for WireBootstrap](https://docs.wirebootstrap.com/pro-pack/select2/select2-configuration) component using the `config` property on the WireBootstrap React Component.

```javascript
const cfg = {
    data: [
        {id: "P1584", text: "Bikes"},
        {id: "P3945", text: "Skates"}
    ]
}
```

```jsx
<WireComponent component="wire.select2" config={cfg}></WireComponent>
```

## Rendering the Component

To render the component, put the DOM element used to render the component inside the `<WireComponent>` element.

The example below turns a normal HTML SELECT element into a Select2 pick list using the WireBootstrap React component with the Select2 for WireBootstrap bindings.

```jsx
<WireComponent component="wire.select2" config={cfg}>
    <select class="form-control"></select>
</WireComponent>
```

For additional examples, visit the [Sample Project](/react/sample-project.md).


---

# 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://docs.wirebootstrap.com/react/react-component.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.