# Passing data to your hookables

One of the most powerful aspects of hooks & hookables is the ability to pass data down to children elements. We can have two sources of context data:

* Hook-level defined data
* Hookable-level defined data

Context data from these two sources is merged and passed to the **hookable** template or component together with the metadata , so we can access them.

<div data-full-width="false"><figure><img src="https://2999098582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRNAi9oQYTWFv4Vn5yZFm%2Fuploads%2FOqYiE981z7G6o3Ql5sdg%2Fimage.png?alt=media&#x26;token=58523f19-7db0-426e-8d3c-05f253139a53" alt=""><figcaption></figcaption></figure></div>

### Example

| <p>Let's assume we want to render a form in our <code>index.html.twig</code> template via a <code>form</code> variable containing a <code>FormView</code> instance.</p><p>Here, we define an <strong><code>index.form</code></strong> hook, and we can pass it the form's context data thanks to the <code>with</code> keyword.</p> |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

This means that we can technically pass down multiple pieces of data to hookables that will hook into `index.form`.

{% code title="index.html.twig" lineNumbers="true" fullWidth="false" %}

```twig
<div class="container">
    {{ form_start(form) }}
    {{ form_errors(form }}
    {{ form_widget(form._token) }}
    
    {% hook 'index.form' with { form } %}
    
    {{ form_end(form, {render_rest: false} }}
</div>
```

{% endcode %}

{% hint style="info" %}
`with { form }` is a short-hand for `with { form: form }`, so the key for our `FormView` in the context data bag will be `form.`
{% endhint %}

Now let's create a Twig template that renders a field from our form and let's make it a hookable. We have 3 possible options to do this :&#x20;

{% tabs %}
{% tab title="property access via hookable\_metadata" %}

<pre class="language-twig" data-title="index/some_field.html.twig" data-line-numbers><code class="lang-twig">&#x3C;div class="field">
  {{ form_row(hookable_metadata.context.form.some_field) }}
<strong> &#x3C;/div>
</strong></code></pre>

{% endtab %}

{% tab title="variable binding" %}

<pre class="language-twig" data-title="index/some_field.html.twig" data-line-numbers><code class="lang-twig">&#x3C;div class="field">
  {% set context = hookable_metadata.context %}
  {{ form_row(context.form.some_field) }}
<strong> &#x3C;/div>
</strong></code></pre>

{% endtab %}

{% tab title="utility function" %}

<pre class="language-twig" data-title="index/some_field.html.twig" data-line-numbers><code class="lang-twig">&#x3C;div class="field">
  {% set context = get_hookable_context() %}
  {{ form_row(context.form.some_field) }}
<strong> &#x3C;/div>
</strong></code></pre>

{% endtab %}
{% endtabs %}

{% hint style="info" %}
You can access the context data in multiple ways, so you can pick the one you like the most. Available options are:

* getting it directly from the `hookable_metadata` object like `hookable_metadata.context.<data_key>`
* getting the context data bag via the Twig function like `get_hookable_context().<data_key>`
  {% endhint %}

### Override behavior

When the same context data key is defined at both the **hook** and **hookable** levels, the **hookable-level** value takes precedence.

{% hint style="info" %}
You can use this to override hook-level data by redefining the key at the hookable level.
{% endhint %}