# Dynamic Value

### The Goal

Prepare a *Basic Application* binding *Input Text Field* Value with another *Text* component.

![Dynamic Value Application](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FpuIh68xziRWwcgiX4cYB%2Fimage.png?alt=media\&token=cf39fed5-8029-4c39-99f9-289914cf5683)

### The Description

Any component's values can be referenced as data output for another. We are using *Text Input* which *Value* is bound with empty *Text*.

### The Knowledge You Will Get

1. Understand how to *Value* association works.

### The Project Structure

{% tabs %}
{% tab title="View\[MainView]" %}

* [ ] MainView
  * [ ] Container\[`cntMain`]
    * [ ] Text Input\[`txtInput`]
    * [ ] Text\[`txtOutput`]
      {% endtab %}
      {% endtabs %}

### 1. Prepare a Basic Layout

Let's start with *Main Container* with two included components; *Text Input* and *Text*.

1. Place in a new **Container**, name it `cntMain`, and set up its *Item Flex* -> `Stretch`; *Horizontal Alignment* -> `Center`; *Vertical Alignment* -> `Middle`
2. Into  the `cntMain` put a **Text Input** and name it `txtInput`.
3. Right under place a new **Text** and set up its *Properties* as follows: *ID* -> `txtInput`; *Text Style* -> `Bold`; *Font Size* -> `Large`

### 2. Bind a Dynamic Value

Associating *Dynamical Value* by a *Function* can be done in just two steps.

1. Switch *Value* of `txtOutput` to dynamic *Function* by clicking on the right side *ƒx* icon.
2. Edit `txtOutput` *Value* -> `txtInput.value`

{% hint style="info" %}
Watch your Canvas what happens if you will type just `txtInput`.
{% endhint %}

{% tabs %}
{% tab title="txtOutput\[Properties]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FEN5zTD3HYLfzEQZEVMQd%2Fimage.png?alt=media\&token=78bd10a3-5408-42a2-bb93-50b8288c52aa)
{% endtab %}

{% tab title="Data Explorer\[txtInput]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2Fms7UQJfEcv115qJfu6A8%2Fimage.png?alt=media\&token=f059ce3a-d1ce-40d8-9ddf-652556b2ec06)
{% endtab %}

{% tab title="txtOutput without .value fx" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FtUlihRbbkMYm0MUE2hbf%2Fimage.png?alt=media\&token=58815079-354c-4423-8625-eb4a3b07aa68)
{% endtab %}
{% endtabs %}

### The Conclusion

Binding and referencing *Values* are efficient and always reflect the state in the *Data Explorer*.

{% hint style="info" %}
Follow up on our *Dynamic Value* tutorial <https://youtu.be/F-SmrBlVUZY>
{% endhint %}