# Dynamic default children with API

**URL:** <https://forum.builder.io/t/dynamic-default-children-with-api/550>\
**Category:** Technical Questions\
**Tags:** gatsby\
**Created:** [April 1, 2021, 1:17am UTC](https://forum.builder.io/t/dynamic-default-children-with-api/550 "2021-04-01T01:17:14Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![mossen](https://avatars.discourse-cdn.com/v4/letter/m/76d3ee/32.png) [@mossen](https://forum.builder.io/u/mossen)\
**Post date:** [April 1, 2021, 1:17am UTC](https://forum.builder.io/t/dynamic-default-children-with-api/550/1 "2021-04-01T01:17:15Z")

</div>

Hi, how can I build dynamic default children for a component in a builder.js file?  
I need to send an API and based on the response create default children but this should not happen at the component level but builder.js file.

---

<div class="post-metadata">

**Author:** ![kara](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/kara/32/80_2.png) [@kara](https://forum.builder.io/u/kara)\
**Post date:** [April 1, 2021, 6:35pm UTC](https://forum.builder.io/t/dynamic-default-children-with-api/550/2 "2021-04-01T18:35:41Z")

</div>

Hi @mossen, thanks for reaching out! Can you provide a few more details?

- What framework are you using?
- What Builder libraries are you using?
- Can you provide a code sample?

Thanks!

---

<div class="post-metadata">

**Author:** ![mossen](https://avatars.discourse-cdn.com/v4/letter/m/76d3ee/32.png) [@mossen](https://forum.builder.io/u/mossen)\
**Post date:** [April 5, 2021, 10:36pm UTC](https://forum.builder.io/t/dynamic-default-children-with-api/550/3 "2021-04-05T22:36:15Z")

</div>

Hi Kara,

I am using Gatsby, following is what I am trying to achieve:

```
const getFormFields = async () => {
  let data;

  await api({
    method: 'GET',
    url: `${process.env.GATSBY_CONNECT_API}`,
    headers: {
      Authorization: `Bearer ${accessToken}`,
      'Content-Type': 'application/json'
    }
  })
    .then(result => {
      data = result?.data?.ClaimQuestionSettings?.QuestionDefinitions;
    })
    .catch(error => {
      console.log('error :>> ', error);
    });

  return data;
};

export const defaultChildren = [
 // Sending API
  ...getFormFields().map(field => {
        const options = {
          options: field?.options || null,
          name: field.Name,
          type: field.type || 'text',
          placeholder: field.DisplayText,
          label: field.DisplayText
          // required: field.IsAnswerRequired,
        };
        if (field.component === 'File input') {
          options.labelPlacement = 'top';
        }

    return {
      '@type': '@builder.io/sdk:Element',
      responsiveStyles: {
        large: {
          marginTop: '10px',
          marginBottom: '10px'
        }
      },
      component: {
        name: field.component,
        options,
        noWrap: true
      }
    };
  }),
];

// using defaultChildren
Builder.registerComponent(Form, {
name: 'Standard Single Claim Form',
image: form,
noWrap: false,
canHaveChildren: true,
defaultChildren
});
```

---

<div class="post-metadata">

**Author:** ![aziz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/aziz/32/2551_2.png) [@aziz](https://forum.builder.io/u/aziz)\
**Post date:** [April 6, 2021, 4:58am UTC](https://forum.builder.io/t/dynamic-default-children-with-api/550/4 "2021-04-06T04:58:39Z")

</div>

Hey @mossen , you want to organize your code in a way that all needed async operation is done before the `registerComponent` call, something like this:

```javascript
export async function registerForm() {
  const data = await getFormData();
  const defaultChildren = getDefautlChildren(data);
  Builder.registerComponent( ....);
}

```

---

<div class="post-metadata">

**Author:** ![mossen](https://avatars.discourse-cdn.com/v4/letter/m/76d3ee/32.png) [@mossen](https://forum.builder.io/u/mossen)\
**Post date:** [April 20, 2021, 10:35am UTC](https://forum.builder.io/t/dynamic-default-children-with-api/550/5 "2021-04-20T10:35:58Z")

</div>

@aziz Thanks for the suggestion, I’ve got this working however the request gets sent out on all the pages view even when that component is not used in the page. Do you have any solution for this? for now I am using` Builder.isEditing` for stopping it.

```
const getDefaultChildren = async () => {
  // prevent sending request on the view pages
  if (!Builder.isEditing) {
    return null;
  }
 // await Fetch data by API
}
Builder.registerComponent(Form, {
  name: 'Standard Single Claim Form',
  defaultChildren: 'getDefaultChildren()',
}

```

Another question that I have is how can I access state here or get an input from editor? I have an input that should be field in the editor and that value needs to be used as a query parameter for this API call.  
maybe something like following?

```
Builder.registerComponent(Form, {
      name: 'Standard Single Claim Form',
      defaultChildren: 'options => getDefaultChildren(options.get("ID"))', // get the input value here
    }

```

 ![Screen Shot 2021-04-21 at 1.24.15 pm](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/522b4028a8914a184bc2b5d4405fa8505c9e7db8.png)

---

<div class="post-metadata">

**Author:** ![kara](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/kara/32/80_2.png) [@kara](https://forum.builder.io/u/kara)\
**Post date:** [April 29, 2021, 11:14pm UTC](https://forum.builder.io/t/dynamic-default-children-with-api/550/6 "2021-04-29T23:14:25Z")

</div>

Hey @mossen! One of our software engineers reached out to you directly to set up some time to chat 🙂