# 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.