# Dynamic binding 'class' not working first load

**URL:** <https://forum.builder.io/t/dynamic-binding-class-not-working-first-load/2558>\
**Category:** Technical Questions\
**Tags:** visual-editor, react, symbols\
**Created:** [September 3, 2022, 5:23pm UTC](https://forum.builder.io/t/dynamic-binding-class-not-working-first-load/2558 "2022-09-03T17:23:43Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![radikris](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@radikris](https://forum.builder.io/u/radikris)\
**Post date:** [September 3, 2022, 5:23pm UTC](https://forum.builder.io/t/dynamic-binding-class-not-working-first-load/2558/1 "2022-09-03T17:23:44Z")

</div>

Hi everyone, hi @TimG maybe it is related to our previous tasks, that’s why I tag you.

Page: [Adatvezérelt Fizetések Bárhol a Világon - Barion](https://barion-builderio.vercel.app/hu/)

So in my symbol, where I use dynamic data binding:

The css classes:

```auto

.gridmultiline{
  display: flex !important;
}

.gridsimpleline{
  display: none !important;
}

@media (max-width: 999px) {
  .gridmultiline{
    display: none !important;
  }

  .gridsimpleline{
    display: flex !important;
  }
}

```

**To see the component:**  
**Add page preview link: [https://barion-builderio.vercel.app/\_\_builder-customgrid\_\_](https://barion-builderio.vercel.app/ __builder-customgrid__ )**

This is working:

> **[Builder.io: Drag and drop Visual CMS](https://builder.io/content/947209e5cd08415aa9a15028000f1a16/edit?activeDesignerTab=5&selectedBlock=builder-d4d51a5f114f405cbfa2246b485c7c98)**
>
> Build and optimize digital experiences for any tech stack, visually.

```auto
const ctype=state.hero.value.data.gridList[state.locale][$index].image ? 'grids gridnoneline' : 'grids gridmultiline'
return ctype 

```

This is not working:

> **[Builder.io: Drag and drop Visual CMS](https://builder.io/content/947209e5cd08415aa9a15028000f1a16/edit?activeDesignerTab=5&selectedBlock=builder-47a18507505f4dde835fc2839638157a&size=medium)**
>
> Build and optimize digital experiences for any tech stack, visually.

```auto
const ctype=state.hero.value.data.gridList[state.locale][$index].image ? '' : 'gridsimpleline'
return (state.hero.value.data.gridList[state.locale][$index].image && (state.hero.value.data.gridList[state.locale][$index].button.buttonType==null)) ? `textcenter ${ctype}`: `${ctype}`

```

And on the page first load missing the gridsimpleline:

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

If I navigate to another page and come back:

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

It would be important, because the first load on desktop without the ‘gridsimpleline’ the div will render, although it should be display: none

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

So in fact the binding is working, but only after the second time, why does it happen, and on the first load why not putting on it? Is it somehow related to the symbol SSR? (inside [Builder.io](http://Builder.io) it looks good as well)

---

<div class="post-metadata">

**Author:** ![radikris](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@radikris](https://forum.builder.io/u/radikris)\
**Post date:** [September 9, 2022, 1:55pm UTC](https://forum.builder.io/t/dynamic-binding-class-not-working-first-load/2558/2 "2022-09-09T13:55:07Z")

</div>

@TimG could you check this out?

---

<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:** [September 9, 2022, 9:42pm UTC](https://forum.builder.io/t/dynamic-binding-class-not-working-first-load/2558/3 "2022-09-09T21:42:38Z")

</div>

Hey @radikris We are still looking into some SSR things that I thought might be related, but looking at it again now I am not sure if that is the case. First, to confirm, so you want the big blue text (1M+, 13,00+, etc) to be display none on first load?

Originally I noticed it was loading multiple times, and it is not longer doing that for me. The only issue I changed was that I noticed you had ID set to something that was an invalid value, I updated it:

![Screen Shot 2022-09-09 at 2.38.48 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/1/1313bc56d89e26fc14c27d2d58b38f107681c4e7.png)

And it seems since then the Blue text only displays a single time, instead of multiple times. So was that the only issue? Or are you expecting that text to be completely hidden (ie, have the `gridsimpleline` )

Let me know if I am missing anything, thanks!

---

<div class="post-metadata">

**Author:** ![radikris](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@radikris](https://forum.builder.io/u/radikris)\
**Post date:** [September 10, 2022, 10:35am UTC](https://forum.builder.io/t/dynamic-binding-class-not-working-first-load/2558/4 "2022-09-10T10:35:48Z")

</div>

Hi @TimG!

Almost you are correct, maybe I am missing something.  
Let me explain again:

In the builder io symbol view:

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

This is the expected behaviour, this looks good. On the site:  
It is still double text, and as you said, I want to display it single time.

So the idea is, on desktop view gridmultiline should be visible, under desktop (tablet and mobile) gridsimpleline should be visible and the other hidden

Gridmultiline:

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

Gridsimpleline this should be not visible on the first load, but the class is missing on the element, that’s why it is there:

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

Second load as you can see works fine:

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

It is still not working for me: [Adatvezérelt Fizetések Bárhol a Világon - Barion](https://barion-builderio.vercel.app/hu/)  
Can you check out?

---

<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:** [September 20, 2022, 3:10am UTC](https://forum.builder.io/t/dynamic-binding-class-not-working-first-load/2558/5 "2022-09-20T03:10:31Z")

</div>

Hi @radikris I believe the issue was that the return statement here:

```auto
const ctype=state.hero.value.data.gridList[state.locale][$index].image ? '' : 'gridsimpleline'
return (state.hero.value.data.gridList[state.locale][$index].image && (state.hero.value.data.gridList[state.locale][$index].button.buttonType==null)) ? `textcenter ${ctype}`: `${ctype}`

```

is being returned before the entire expression is evaluated.

I believe I was able to get it working consistently by changing `return` to `export default`

I also believe if you changed the logic to something like the below, it should work as well… let me know if either of those work for you!

```auto
const ctype = state.hero.value.data.gridList[state.locale][$index].image ? '' : 'gridsimpleline'
const textCenter = !state.hero.value.data.gridList[state.locale][$index].button.buttonType ? 'textcetner' : '';
return `${textCenter} ${ctype}`;

```