# No “props”!

Almost all libraries and user interface frameworks use the concept of `props` to pass data or customize the use of components, in Bemtv we have the concept of “component proxy” which is much more powerful because it offers access to the component we want to use, with this we can define or set properties, use its methods and export it to be used in other parts of the application.

There are two ways that allow us to access one component in another, they work the same way, the only difference is where they are imported from.

Let's create two components, the first is the `App[]`  and the second is the `Button[]`, in this example the `App[]`  will make use of the `Button[]` :

```javascript
import { _ } from "bemtv";

const { template } = _`App`();

template`Button[]`;
```

```javascript
import { _ } from "bemtv";

const { template } = _`Button`({ bgColor: "blue" });

template`button[background-color: $bgColor; ~ I am a button!]`;
```

Note that our `Button[]` makes use of CSS-In-Template to define its background color and its definition is done through a `compVar` named `bgColor.`

When rendering our components, we would have a button with a blue background color, but what if we wanted another color?

### proxy()

The first way is through the `proxy()` method, it is available in the instance of the component that we want to customize and we must import it in the component that will use it:

```javascript
import { _ } from "bemtv";
import { proxy } from "./Button"

const { template } = _`App`();

template`Button[]`;
```

<pre class="language-javascript"><code class="lang-javascript">import { _ } from "bemtv";

<strong>export const { proxy, template } = _`Button`({ bgColor: "blue" });
</strong>
template`button[background-color: $bgColor; ~ I am a button!]`;
</code></pre>

We changed our example so that `Button[]` exports its methods and `App[]` imports them.

When we call the `proxy()` method we have access to an object that simulates the operation of the component from which it was imported, basically we have access to the component:

<pre class="language-javascript"><code class="lang-javascript"><strong>import { _ } from "bemtv";
</strong>import { proxy } from "./Button"

const { template } = _`App`();
const ButtonProxy = proxy();

template`${ButtonProxy}[]`;
</code></pre>

We change the `App[]` to use the `proxy()` method, and in the template we replace the name of the component with the return of `proxy()` by doing this we bind our proxy object to the instance of the component we want to use.

> This object has a “key” property that bemtv automatically accesses when the template is defined as a TemplateStringsArray.

Now that we have access to the component we can simply change the `bgColor` property:

<pre class="language-javascript"><code class="lang-javascript"><strong>import { _ } from "bemtv";
</strong>import { proxy } from "./Button"

const { template } = _`App`();
const ButtonProxy = proxy();

ButtonProxy.$.bgColor = "red";

template`${ButtonProxy}[]`;
</code></pre>

Maybe you're wondering why all this work to change a property? But as we can see, we have direct access to the instance of the component we want and with that we can make use of all that it offers, in addition to being able to export the `ButtonProxy` variable to other parts of the application.

### proxyFrom()

The only difference to the `proxy()` method is that the `proxyFrom()` function is imported from the main module and takes the component name as an argument:

<pre class="language-javascript"><code class="lang-javascript"><strong>import { _, proxyFrom } from "bemtv";
</strong>
const { template } = _`App`();

const ButtonProxy = proxyFrom`Button`;

ButtonProxy.$.bgColor = "red";

template`${ButtonProxy}[]`;
</code></pre>

> When using *TypeScript* the `proxy()` method has an advantage as it already comes with the `compVars` types defined.


---

# 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://bemtv.gitbook.io/bemtvjs/no-props.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.