Working with dynamically created components

[domhnallohanlon]

In the example below, new buttons are being created every time the + button is pressed at the bottom of the screens.

Each new button is given it’s own unique number which is in turn displayed on the button, i.e. Button 1, Button 2, etc.

Finally, these new buttons themselves are clickable, and the clicked stated is persistent as new buttons are added.

---

Create a New Button

Creating a new button is easy with the “Any Component” blocks, but the trick here is to put all the newly created buttons into their own layout component - in this case Column1. Note, that for the rest of this tutorial to work, the “as first in” property should in fact be “as last in”. This can be seen in the second screenshot.

Dynamically Numbering Buttons

Every time we create a new button we add it to the bottom of Column1, which is done by using the “as last in” property.

Once the button is added to the Column we look up it’s index, or position, in the list of buttons in Column 1. This is used to set unique text for each of the new buttons as they are created.

Highlighting the Buttons

This would be slightly easier if we weren’t using a button to create all the buttons in the first place, but here’s my approach.

First, we create a variable called clickedButton which is use to keep track of which block inside Column1 has been clicked. It’s OK to give this variable a default value of 0, since as long as the + button is being pressed then there won’t be any new buttons to highlight.

Next, we check if the clicked button is the + button, and if it is, we set the background colour of clickedButton to light blue.

Finally, if one of the new buttons is pressed, we start by making all of the buttons white and then make the clicked button light blue.

Finally, the clicked button is also stored in the clickedButton variable so that once a button is highlighted it stays highlighted until another new button is pressed.

Remix

There’s not a whole lot to this, but if you want to take a closer look, here’s my remix link:
https://x.thunkable.com/copy/2fb563ded7dd0c3ab3c9002737da4895

[jacob1]

Thanks Dom, this looks good - do you think this could be used to make a newsfeed styled design?

[domhnallohanlon]

Thanks @jacob1,

yep, I’d say so - but start simple and build up the complexity.

For example, dynamically create labels to display all the headings, then add dynamically generated images to go with each new story, and so on.

[giu.seneafj3im]

why can’t I find the “create” block in my “any component” section?

[muneer]

If you are using DnD UI then you will not find it. It hasn’t been included yet.