# Pass Locale into Symbol

**URL:** <https://forum.builder.io/t/pass-locale-into-symbol/2469>\
**Category:** Technical Questions\
**Tags:** feature, nextjs\
**Created:** [August 10, 2022, 6:34am UTC](https://forum.builder.io/t/pass-locale-into-symbol/2469 "2022-08-10T06:34:16Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![leontan](https://avatars.discourse-cdn.com/v4/letter/l/9de053/32.png) [@leontan](https://forum.builder.io/u/leontan)\
**Post date:** [August 10, 2022, 6:34am UTC](https://forum.builder.io/t/pass-locale-into-symbol/2469/1 "2022-08-10T06:34:16Z")

</div>

I have created a reusable symbol, so call Header, and there is a Title field with type Text and with multiple locale, such as `en`, `zh`, `ja` and `Default`.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/1/1a1873b49c0838eb4596da0e3233cfb22816a26d.png)

So, after that I went to create a Page and include that resuable Symbol into the Page and I notice, those elements I have added onto the page will get affect and turn into the correct locale (chinese in our case) but not the the text in Symbol (Header Symbol)

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/e/e23c5a2559f96e8f94955319efee43a2f6720bea.png)

On the nextjs coding side, I include the ‘zh’ - Chinese Locale at the page level, [image|661x500](https://forum.builder.io/uploads/short-url/xTs34GBTE2KvfDy6v0Agea19y9N.png)

just wondering why only those elements/ components on the Page level get affect and not Symbol ? Can you please advise how should I pass it to my Symbol from the Page level please ?

---

<div class="post-metadata">

**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\
**Post date:** [August 10, 2022, 11:14pm UTC](https://forum.builder.io/t/pass-locale-into-symbol/2469/2 "2022-08-10T23:14:47Z")

</div>

Hi @leontan welcome to the Forum, and great question!

By default, symbols are a contained component that have their own state, so the locale being passed into the page-level state wouldn’t necessarily pass down into the symbol-level state, where the binding is set up.

 ![Screen Shot 2022-08-10 at 4.12.07 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/2/25b744e93077d2a0cd49da35acdc0e404520dd05.png)

If you click on the Symbol and check the `Advanced Options` tab, you should see a toggle to allow the Symbol to `inherit state`. Once it is inheriting state it should receive that state.locale value, try that out and see if that works for you!

---

<div class="post-metadata">

**Author:** ![leontan](https://avatars.discourse-cdn.com/v4/letter/l/9de053/32.png) [@leontan](https://forum.builder.io/u/leontan)\
**Post date:** [August 11, 2022, 1:46am UTC](https://forum.builder.io/t/pass-locale-into-symbol/2469/3 "2022-08-11T01:46:34Z")

</div>

hi TimG,

thank you, yes, it is working now. Another quick question, since this Symbol is a Header and it will be included for almost all pages. Imagine I have 100 pages, does it mean on every pages, I have to go in and toggle this field `Inherit State` one by one? may i know is there a way I can set it to be enabled by default or any hack such as create a Template which wrap the Symbol etc

---

<div class="post-metadata">

**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\
**Post date:** [August 11, 2022, 2:45am UTC](https://forum.builder.io/t/pass-locale-into-symbol/2469/4 "2022-08-11T02:45:03Z")

</div>

Hi @leontan hmm that is an interesting…yes there is potentially ways you could do it, possibly setting the inherit state value to true in the parent content json manually but I think that could get messy.

Let me ask you this, are all of your pages going to have this header? If that is the case, instead of manually adding them to the page, you could just as easily fetch it within your code base and add it as a on the app or some other top level page?

You can see an example doing something like this in our [React Design System starter](https://github.com/BuilderIO/builder/tree/main/examples/react-design-system):  
[Header component](https://github.com/BuilderIO/builder/blob/main/examples/react-design-system/src/components/Header.jsx)  
[added as a top-level component on index.js](https://github.com/BuilderIO/builder/blob/f839d25ce8c6136bbde2868c683f9b5dd80c732c/examples/react-design-system/src/index.js#L21)

Hope this helps!

---

<div class="post-metadata">

**Author:** ![leontan](https://avatars.discourse-cdn.com/v4/letter/l/9de053/32.png) [@leontan](https://forum.builder.io/u/leontan)\
**Post date:** [August 11, 2022, 3:41am UTC](https://forum.builder.io/t/pass-locale-into-symbol/2469/5 "2022-08-11T03:41:41Z")

</div>

thx Tim for the idea.

yes, you are right Header and Footer are actually more straight forward and can be added from the code level. However, for our website, every single page comes with multi-lingual, definitely there will be some other reusable components in the `Symbol` form, which are expected to be inserted into the middle section of random page, and need to be `locale` enabled. Because one thing I like about [builder.io](http://builder.io) is, it releases out Programmer, but I cannot ensure most of my business entity colleague would be consistent enough to enable the `Inherit state` when they drag those Symbol components in.

mind sharing hows the parent content json works ? where the entry, I would like to try it out please.

---

<div class="post-metadata">

**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\
**Post date:** [August 12, 2022, 3:36am UTC](https://forum.builder.io/t/pass-locale-into-symbol/2469/6 "2022-08-12T03:36:12Z")

</div>

Hmm actually, I am not sure it would be a great option. My thinking was, if you look at the response from hitting our API endpoint directly:  
[https://cdn.builder.io/api/v2/content/page?apiKey=e37b966ec695434bb21e97442a4a9f46&userAttributes.urlPath=%2Fparent-page&limit=1](https://cdn.builder.io/api/v2/content/page?apiKey=e37b966ec695434bb21e97442a4a9f46&userAttributes.urlPath=%2Fparent-page&limit=1)

```auto
..."blocks": [
  {  
    "@type": "@builder.io/sdk:Element",
    "@version": 2,
    "id": "builder-54acb58f09f34d90a87bd6ecd97ebbe1",
    "component": {
      "name": "Symbol",
      "options": {
      "dataOnly": false,
      **"inheritState": true,**
      "renderToLiquid": false,
      "symbol": {
        "model": "symbol",
        "entry": "66bf2bfb01374a6bb2700db01c182a1f",
        "data": {
        "textInput": "default input text",
        "author": {
          "@type": "@builder.io/core:Reference",
          "id": "026dc09cf19b4546bdb21aee320261a0",
          "model": "author"
      }
    }
  }
}

```

You could theoretically use the [write API](https://www.builder.io/c/docs/write-api) to manually find all content with a symbol and add the `inheritState: true` but given that symbols can be nested, etc it would be very difficult to accurately set up.

Instead, I actually think the best route might be to instead of inheriting state, add a `locale` [input to your Symbol](https://www.builder.io/c/docs/adding-inputs-to-symbols?_host=www.builder.io) entries themselves that is marked as `Required`

 ![Screen Shot 2022-08-11 at 8.25.04 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/5/5ceb34334ccd66eb522f51b30c35ae8d27a79203.png)

Then, whenever a user places a symbol on a page, they will be required to select the locale. Here, instead of setting a value, you can actually bind the locale to a locale value from the parent page’s state:

 ![Screen Shot 2022-08-11 at 8.36.33 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/1/1f55700f88af4090b9ff05fb39c06e2436a505cb.png)

This requires a little more of a setup, but as long as you set it as a required field that should force authors to set those values and avoid any user errors.

Hopefully this makes sense, please try it out and see if that works for you!

---

<div class="post-metadata">

**Author:** ![lburtness](https://avatars.discourse-cdn.com/v4/letter/l/ecccb3/32.png) [@lburtness](https://forum.builder.io/u/lburtness)\
**Post date:** [November 2, 2023, 8:33pm UTC](https://forum.builder.io/t/pass-locale-into-symbol/2469/7 "2023-11-02T20:33:19Z")

</div>

Hi Builder Forum!

Is there any update here? Are we able to set “Inherit State” to “true” across the board for all Symbol usage? If not, is there any plan for this to be added in the future?

Thanks!