Create multiple tabs in a tabbed container per array entry

App Building
, ,
1

I havea graphql-query which returns me an array of objects. As an example just use this schema

query {
 my_query: [MyType!]!
}

type MyType! {
  name: String!
  age: Int!
}

And lets say I want a specifc form to go with each array-entry. The form has a text-field which displays the name and a number-field which lets you change the age or whatever. The point is that it is a more complex component than one of the standard-components.

How can I create a tabbed container that has a different tab with a form that follows this formula, given a dynamic amount of array entries.

So if my_query returns 3 entries, there are 3 tabs and each tab has this form in it, with different data ( corresponding to the data from the query ). If the query returns 20 entries, then there should be 20 tabs.

2

Hey Noz! Great question. Unfortunately you can't dynamically create tabs for a tabbed container. But you could achieve similar functionality by populating a form with specific user data, by using a button group or dropdown.

799×278 22.5 KB





Here we are dynamically creating the buttons in the button group based on the number of results returned by the query! When you select a button, the textInputs key into the query.data at the index of the button in the group and pulls out the appropriate key for that input! It won't give you different tabs, but it will allow you to select a button and see the specific information for that person etc.