Issue Binding HTML Attributes

Builder content link
https://builder.io/content/8e1bfe7d4ca648b884e73616b486fa6a/edit

Builder public api key
ea37b90b89334a2ab1714e2159c75418

What are you trying to accomplish
The symbol in the content link is an image gallery. In mobile & tablet views, the design changes from a grid of images to a scrollable row of images. Users can scroll by swiping or pressing forward / back arrow buttons. The buttons function by getting the element that contains the images (by id), then using the element’s scroll function to move forward or back. This works fine if there’s just one instance of this symbol on the page but it breaks when there are multiple instances because the id gets repeated. As a result, I have a created a field on the symbol for the user to enter a unique id; this id would then be bound to the gallery container’s id attribute. Unfortunately, the binding does not seem to be working - the gallery container is getting the default value for the field and not the user given value. This means users can’t scroll using the buttons.

Code stack you are integrating Builder with
NextJs & React

It looks like the issue was that we should be binding on id but it was defaulting to properties.id.

1 Like

yes! Thank you @ajavier

And just for posterity…

In order to set an ID attribute on an element you have a few options. First, if you are hard coding a set value, you can add the ID in the HTML attributes section of the Style tab, as below:
Screen Shot 2022-03-01 at 3.43.23 PM

However, if you want to base the ID on some sort of value in state or dynamic variable, you would want to set a data binding in the Data tab within the Visual Editor. Here you can use JS to set it to any value, or even a template literal, as shown below:

Screen Shot 2022-03-01 at 3.40.14 PM

Screen Shot 2022-03-01 at 3.42.46 PM

1 Like