# Multiple \`BuilderComponent\`s

**URL:** <https://forum.builder.io/t/multiple-buildercomponent-s/3133>\
**Category:** Technical Questions\
**Tags:** react\
**Created:** [January 23, 2023, 5:14am UTC](https://forum.builder.io/t/multiple-buildercomponent-s/3133 "2023-01-23T05:14:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ivan.1](https://avatars.discourse-cdn.com/v4/letter/i/c0e974/32.png) [@Ivan.1](https://forum.builder.io/u/Ivan.1)\
**Post date:** [January 23, 2023, 5:14am UTC](https://forum.builder.io/t/multiple-buildercomponent-s/3133/1 "2023-01-23T05:14:27Z")

</div>

Hello, pardon me if I’ve missed a solution for the following issue somewhere else, haven’t found anything related.

I want to show multiple Sections inside a popup (without SSR). In order to achieve that I’m adding multiple `BuilderComponent`s.

```auto
<BuilderComponent
          model="registration-block"
          options={{
            userAttributes: {
              locale,
            },
            query: {
              'data.position': 'top',
              'data.isActive': true,
            },
          }}
        />
/* .................. */
<BuilderComponent
          model="registration-block"
          options={{
            userAttributes: {
              locale,
            },
            query: {
              'data.position': 'bottom',
              'data.isActive': true,
            },
          }}
        />

```

**The important thing is that the model is the same** for the two components. If written as above code makes only one request to Builder API and uses the result in both components.

Seems like BuilderComponent caches results just by the model name. A workaround that I found is to add `key` to `options` like that:

```auto
<BuilderComponent
          model="registration-block"
          options={{
            key: 'bottomThing',
            userAttributes: {
              locale,
            },
            query: {
              'data.position': 'bottom',
              'data.isActive': true,
            },
          }}
        />

```

It works but it produces requests to API that I would consider broken because it uses non-existent endpoint (`bottomThing`) and overwrites the model with query parameter:

```auto
"https://cdn.builder.io/api/v1/query/key-12345/bottomThing?omit=meta.componentsUsed&apiKey=key-12345&userAttributes.locale=ja&options.bottomThing.query=%7B%22data.position%22%3A%22bottom%22%2C%22data.isActive%22%3Atrue%7D&options.bottomThing.model=%22registration-block%22"

```

Another option is to get content via builder API (doesn’t matter serverside or from the client) and feed it directly to `content` property of `BuidlerCompenent`. But it’s less descriptive and requires extra code.

Am I missing something? Is this a by-design behavior for BuilderComponent?  
Maybe I should use a different approach altogether.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [January 23, 2023, 5:55pm UTC](https://forum.builder.io/t/multiple-buildercomponent-s/3133/2 "2023-01-23T17:55:53Z")

</div>

Hi @Ivan.1,

To pull in content entries from different models you can use the built-in Symbol block. This allows you to select another model, and then an entry from that model to add other content to your page.

![Screen Shot 2022-05-02 at 12.57.46 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/e/e5173b726b733b8ea9f00bbc6e6099824d8a4276.png)

> **[Introduction to Symbols - Builder.io](https://www.builder.io/c/docs/symbols-intro?_host=www.builder.io)**
>
> Build and optimize digital experiences for any tech stack, visually.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [January 25, 2023, 5:51pm UTC](https://forum.builder.io/t/multiple-buildercomponent-s/3133/3 "2023-01-25T17:51:11Z")

</div>

Hi @Ivan.1,

In the code yes it is recommended to use the key prop as outlined here: [How come having multiple calls to the API to the same content model, or having multiple \<BuilderComponent\> elements of the same model type, doesn't render as I expect?](https://forum.builder.io/t/how-come-having-multiple-calls-to-the-api-to-the-same-content-model-or-having-multiple-buildercomponent-elements-of-the-same-model-type-doesnt-render-as-i-expect/2931)

The API requests look broken but the SDK is able to resolve them and serve the right content, which is by design, using the key prop is our recommended method to prevent the result caching.

Let us know if you have any further questions. Thank you!