# Unable to Clone Components as "First In" or "Last In" To Another Cloned Component

**URL:** <https://community.thunkable.com/t/unable-to-clone-components-as-first-in-or-last-in-to-another-cloned-component/2902591>\
**Category:** Questions about Thunkable X\
**Tags:** any-component\
**Created:** [March 19, 2024, 8:56am UTC](https://community.thunkable.com/t/unable-to-clone-components-as-first-in-or-last-in-to-another-cloned-component/2902591 "2024-03-19T08:56:53Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![choprarishabh1010199](https://avatars.discourse-cdn.com/v4/letter/c/a8b319/32.png) [@choprarishabh1010199](https://community.thunkable.com/u/choprarishabh1010199)\
**Post date:** [March 19, 2024, 8:56am UTC](https://community.thunkable.com/t/unable-to-clone-components-as-first-in-or-last-in-to-another-cloned-component/2902591/1 "2024-03-19T08:56:53Z")

</div>

I’m trying to show my students how a data viewer list is just a list of repeated elements. To do that, I used to use Columns in Snap To Place.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/8/e8c8a53f2ce191028302048239b68cef8ef7f0c8.png)

But I’m unable to do so in Drag and Drop using Groups.  
When I click on “Any Component” block, I don’t get the option of “first in” or “last in”.  
The only options are exact positions. This will not achieve the intended ordered list of new elements.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/d/2d101a9ec037d2aa478bc44d287098e45f56e665.png)

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [March 22, 2024, 1:26pm UTC](https://community.thunkable.com/t/unable-to-clone-components-as-first-in-or-last-in-to-another-cloned-component/2902591/2 "2024-03-22T13:26:13Z")

</div>

Hello @choprarishabh1010199 👋  
Welcome to the community! 🎉  
You can do that in Drag and Drop using [Layout](https://docs.thunkable.com/app-design/ui-components/basic-components/layout).  
After you add a layout component you can clone the component inside the containers.  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/c/6c905bd168a8a0286ff7bfd11a3d9acfc857bb9b.png)

---

<div class="post-metadata">

**Author:** ![choprarishabh1010199](https://avatars.discourse-cdn.com/v4/letter/c/a8b319/32.png) [@choprarishabh1010199](https://community.thunkable.com/u/choprarishabh1010199)\
**Post date:** [April 8, 2024, 5:58am UTC](https://community.thunkable.com/t/unable-to-clone-components-as-first-in-or-last-in-to-another-cloned-component/2902591/3 "2024-04-08T05:58:48Z")

</div>

Hi @ioannis, thank you for helping me with that, but my use-case is still not quite possible. You can view my snap to place project [here](https://x.thunkable.com/copy/5167a030e57cf96d2539154281cabf81).

However, I’m unable to implement the same functionality in [Drag and Drop](https://x.thunkable.com/copy/858dea425c422dc4744cc527298fdf27).

The main issue: Snap To Place allows cloning an element, and placing it as “first in” to another element. In my case, I was able to clone the top text, and place it as first in, to my meme clone object. Similarly, I was able to clone the bottom text, and place it as last in, to my meme clone object.

However, in my drag and drop interface, I only have the option to clone **in layout** , as first in: I’m unable to clone directly “as first in”.

I know there are easier ways of making a list, but this is for a class I’m conducting. This introduces the concept of Lists and For Loop. I’m trying to show students how you can loop over a list of items, and clone objects to create a feed of elements.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 8, 2024, 8:29am UTC](https://community.thunkable.com/t/unable-to-clone-components-as-first-in-or-last-in-to-another-cloned-component/2902591/4 "2024-04-08T08:29:47Z")

</div>

Why won’t it work to clone a component as “first in” a layout? That’s how you should be using clones. You can clone a component or a container.

---

<div class="post-metadata">

**Author:** ![choprarishabh1010199](https://avatars.discourse-cdn.com/v4/letter/c/a8b319/32.png) [@choprarishabh1010199](https://community.thunkable.com/u/choprarishabh1010199)\
**Post date:** [April 8, 2024, 9:18am UTC](https://community.thunkable.com/t/unable-to-clone-components-as-first-in-or-last-in-to-another-cloned-component/2902591/5 "2024-04-08T09:18:24Z")

</div>

The main reason might be cause I want to clone the labels “as first in” to my component, not my layout.

Snap To Place allowed cloning and placing the components as first/last into another component. But it seems like Drag and Drop only allowed cloning and placing the component as first/last into a layout, not another component.

Here’s my Snap To Place Code:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/1/f1f7361c98aa58c4cc36d9bb7c5b48baa44f54d4.png)

And Here’s my Drag and Drop Code:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/0/b0ea2614b694b1ebea0b71cdf17b33e381c5f032.png)

The major difference is when I try to clone the TopText and BottomText in both.  
In Snap To Place, I’m able to clone the TopText as first in the `clone` (meaning the Meme Container) itself. Then, I’m able to clone the BottomText as last in the Meme Container itself. Therefore, I’m able to have the following UI rendered when opening the app:

 ![IMG_64CFCB97F85A-1](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/c/dc7033384562d09471e6b62fbaf6baaecedc13f5.jpeg)  
Note: The Meme Container is hidden, below the meme you see in the screenshot.

However, in Drag and Drop, I’m not able to clone **as first in the meme container.** It’s only showing the possibility of cloning the toptext/bottom text lables **in layout, as first in**. That causes the problem when I view my app, as it’s trying to clone the labels as first in the overarching layout, and not _ **within** _ the meme container.

 ![IMG_5502.PNG](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/5/959bc0c57a7f0b608d3b01299cb12cbc002f8045.jpeg)  
 ![IMG_5501.PNG](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/b/9b58e08719a98ab0bc157ecfda5fb8c7f77b4178.jpeg)

Please let me know where I’m going wrong here.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 8, 2024, 7:43pm UTC](https://community.thunkable.com/t/unable-to-clone-components-as-first-in-or-last-in-to-another-cloned-component/2902591/6 "2024-04-08T19:43:50Z")

</div>

I’m a little confused because it seems like you’re using the word “layout” to mean the screen. The layout component can have containers inside it and you can definitely clone either the full container inside a layout or the individual components inside a container.

Sorry if I’m not understanding.

You may need to explain things with detailed examples. The screenshots don’t mean much to me because you’re used to looking at them and know what you want and I don’t.

---

<div class="post-metadata">

**Author:** ![choprarishabh1010199](https://avatars.discourse-cdn.com/v4/letter/c/a8b319/32.png) [@choprarishabh1010199](https://community.thunkable.com/u/choprarishabh1010199)\
**Post date:** [April 8, 2024, 8:46pm UTC](https://community.thunkable.com/t/unable-to-clone-components-as-first-in-or-last-in-to-another-cloned-component/2902591/7 "2024-04-08T20:46:02Z")

</div>

That makes sense. The main challenge I’m facing is that in

- In Snap To Place, I can clone a component as **first in** or **last in** an another component.  

- However, in Drag and Drop, the only available options start with **in layout,…**  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/d/3db6dbb5d40ab164d9564ca85553aafbbeba66f5.png)

**Goal:** I want to clone the meme container, and then clone `Top Text` label as first in the meme container, and then clone the `Bottom Text` label as last in the meme container.

I added comments to my code in red. The main pointer of comparison is point 6 (highlighted).

[Snap To Place Code](https://x.thunkable.com/copy/5167a030e57cf96d2539154281cabf81):

 ![f1f7361c98aa58c4cc36d9bb7c5b48baa44f54d4_2_1142x1000](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/8/781da266543524cddc66ffc9bd240e67e92ffef2.png)

[Drag and Drop Code](https://x.thunkable.com/copy/858dea425c422dc4744cc527298fdf27):

 ![b0ea2614b694b1ebea0b71cdf17b33e381c5f032_2_1164x1000](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/8/585cd7d06ed14fd9bc28db1b23eb73a46589b29b.png)

I hope it’s a bit more clear now. I’m not getting the option to clone a component **as first in**  **another**  **component.** I’m only getting the option to clone a component, **as first in layout, …**.

Please let me know how I can help make my question clearer. Thank you for much for taking the time to help me with this.

I really want to make this project. It’ll be fun for students to make memes and learn about lists and for loops while at it.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [July 7, 2024, 8:46pm UTC](https://community.thunkable.com/t/unable-to-clone-components-as-first-in-or-last-in-to-another-cloned-component/2902591/8 "2024-07-07T20:46:20Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
