# Dynamic addition for different component types based on user input **URL:** \ **Category:** How do I?\ **Tags:** binding, design\ **Created:** [November 3, 2023, 1:05pm UTC](https://community.weweb.io/t/dynamic-addition-for-different-component-types-based-on-user-input/5194 "2023-11-03T13:05:45Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![msheikh94](https://avatars.discourse-cdn.com/v4/letter/m/8edcca/32.png) [@msheikh94](https://community.weweb.io/u/msheikh94)\ **Post date:** [November 3, 2023, 1:05pm UTC](https://community.weweb.io/t/dynamic-addition-for-different-component-types-based-on-user-input/5194/1 "2023-11-03T13:05:45Z")
Hi all, I am fairly new to WeWeb, love it! but I am struggling with this and I don’t know if I am trying to build this in the right place, however what I am trying to do is to build an interface for a students to share their medical cases…the thing is that I want to give them the freedom of adding different components in the order they want, for example: a heading then an image then text,or an image then a caption then a text or a heading. here is an example of what I want to achieve ![Screenshot 2023-11-03 at 14.05.02](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/95358b38ad19847bce73528417e0c29a4a6ad77e.jpeg) ---
**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\ **Post date:** [November 3, 2023, 1:58pm UTC](https://community.weweb.io/t/dynamic-addition-for-different-component-types-based-on-user-input/5194/2 "2023-11-03T13:58:38Z")
It’s all about how you structure the data. At minimum is an array of objects whith at least an id and type property. To render it you bind the array to a container so that it will be repeated for each object in the array. In the container you conditionally render the elements based of the type of the object in the context ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [November 4, 2023, 8:22am UTC](https://community.weweb.io/t/dynamic-addition-for-different-component-types-based-on-user-input/5194/3 "2023-11-04T08:22:32Z")
Also you could use kanban to make this draggable, that would be hot! ---
**Author:** ![msheikh94](https://avatars.discourse-cdn.com/v4/letter/m/8edcca/32.png) [@msheikh94](https://community.weweb.io/u/msheikh94)\ **Post date:** [November 4, 2023, 8:42am UTC](https://community.weweb.io/t/dynamic-addition-for-different-component-types-based-on-user-input/5194/4 "2023-11-04T08:42:07Z")
@dorilama @Broberto thank you! and yes I thought about using a kanban! it would be awesome, it’s just that I don’t know how to insert different field types in the array of objects,as an example how would I insert an input text component then an upload an image component in the array ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [November 4, 2023, 8:52am UTC](https://community.weweb.io/t/dynamic-addition-for-different-component-types-based-on-user-input/5194/5 "2023-11-04T08:52:07Z")
What I would do, is structure the data as follows, this will get a little advanced, so sorry in advance 😃 **defaultItems** variable (type array) ![Screenshot 2023-11-04 at 09.49.43](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/98e7671cebc7c3444bad8be2329129b860c73fcf.png) Based on the **type** , I would create one kanban item, with all the items inside, so, there would be all of these in one div ![Screenshot 2023-11-04 at 09.50.23](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/73d5e96c39f21ebc3859dc91c347d87be5fc81a5.png) Then I would dynamically hide, based on **item.type** within your Kanban context, each part, so if **item.type = “text”** display the text etc… This could be a way, but I’m not sure if that would work, it works just in my head 😃 In your case, it would be enough to bind different labels and icons, for one kanban item ---
**Author:** ![msheikh94](https://avatars.discourse-cdn.com/v4/letter/m/8edcca/32.png) [@msheikh94](https://community.weweb.io/u/msheikh94)\ **Post date:** [November 4, 2023, 9:09am UTC](https://community.weweb.io/t/dynamic-addition-for-different-component-types-based-on-user-input/5194/6 "2023-11-04T09:09:47Z")
@Broberto looks good! Thanks a lot! I will give it a try and get back to you! 😄 ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [November 4, 2023, 9:17am UTC](https://community.weweb.io/t/dynamic-addition-for-different-component-types-based-on-user-input/5194/7 "2023-11-04T09:17:49Z")
It definitely is possible, I just did it 😃 ---
**Author:** ![msheikh94](https://avatars.discourse-cdn.com/v4/letter/m/8edcca/32.png) [@msheikh94](https://community.weweb.io/u/msheikh94)\ **Post date:** [November 4, 2023, 9:20am UTC](https://community.weweb.io/t/dynamic-addition-for-different-component-types-based-on-user-input/5194/8 "2023-11-04T09:20:45Z")
Tried it without the Kanban now and it worked! you are the absolute best! thank you! ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [November 4, 2023, 9:21am UTC](https://community.weweb.io/t/dynamic-addition-for-different-component-types-based-on-user-input/5194/9 "2023-11-04T09:21:49Z")
I’d say, try it with the Kanban, it has a lot of potential! 🙂 And if possible, let us know how it goes ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [November 4, 2023, 9:27am UTC](https://community.weweb.io/t/dynamic-addition-for-different-component-types-based-on-user-input/5194/10 "2023-11-04T09:27:06Z")
You can even stack the stuff, and reorder, so this is cool) ![Screenshot 2023-11-04 at 10.26.45](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/0/08f11a2629ab7b3ad6666484704ff613a2ed3e11.png) ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [November 4, 2023, 9:33am UTC](https://community.weweb.io/t/dynamic-addition-for-different-component-types-based-on-user-input/5194/11 "2023-11-04T09:33:36Z")
I also know @jptrinh made something similar, but without drag, might be time to up your game! 😃 ---
**Author:** ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)\ **Post date:** [November 4, 2023, 9:40am UTC](https://community.weweb.io/t/dynamic-addition-for-different-component-types-based-on-user-input/5194/12 "2023-11-04T09:40:16Z")
Awesome stuff! @Broberto said it all 🙂