# Help with BuilderComponent not rendering

**URL:** <https://forum.builder.io/t/help-with-buildercomponent-not-rendering/14416>\
**Category:** Technical Questions\
**Created:** [April 17, 2025, 2:29am UTC](https://forum.builder.io/t/help-with-buildercomponent-not-rendering/14416 "2025-04-17T02:29:34Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![DanCrevier](https://avatars.discourse-cdn.com/v4/letter/d/d26b3c/32.png) [@DanCrevier](https://forum.builder.io/u/DanCrevier)\
**Post date:** [April 17, 2025, 2:29am UTC](https://forum.builder.io/t/help-with-buildercomponent-not-rendering/14416/1 "2025-04-17T02:29:34Z")

</div>

_Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank._

**Builder content link**

> **[Builder.io: Visual Development Platform](https://builder.io/content/4a4067d6ab1d481692d92be4390688b2)**
>
> Builder is the only Visual Development Platform that offers an AI-powered design-to-code tool, a visual editor and an enterprise CMS.

**Builder public api key**  
a01f0793636740a6be482bc2528bdcd5

**What are you trying to accomplish**  
I’m investigating integrating [builder.io](http://builder.io) into a fairly straightforward React application to allow non-technical users to design marketing content.

**Screenshots or video link**  
_Screenshots of your issue, or even better a link to a video of what is happening or what you are trying to accomplish. We love using loom for that sort of thing_

**Code stack you are integrating Builder with**  
React

**Reproducible code example**  
Here’s the code I’m using with the goal of simply rendering the content designed in builder within one of our pages (so there’s a header and footer around it). is a simple progress widget while it’s loading.

```auto
// @ts-nocheck
import * as React from "react";
import {builder, BuilderComponent} from "@builder.io/react";
import {useEffect, useState} from "react";
import {CenteredLoading} from "../../components/loading";

const API_KEY = "a01f0793636740a6be482bc2528bdcd5";

builder.init(API_KEY);

export function BuilderBasedPage({page}: {page: string}) {
    const [content, setContent] = useState(null);

    // get the page content from Builder
    useEffect(() => {
        async function fetchContent() {
            const content = await builder
                .get("page", {
                    url: page,
                })
                .promise();

            setContent(content);
            console.log(content);
        }
        fetchContent();
    }, [page]);

    return content ? <BuilderComponent model="page" component={content} /> : <CenteredLoading />;
}

```

I see a network request made and it looks like it gets some structured content for the page that looks reasonable. However, it doesn’t actually render anything. When inspecting with the Chrome dev tools I just see:

![CleanShot 2025-04-16 at 16.25.40](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/2/2f3386ccd166295740049f24a258ac844b016cd8.png)

Any ideas what’s going on? I’m not sure if it’s related, but you might also notice the `@ts-nocheck` at the top. Without it, I get this error:

```auto
      TS2786: 'BuilderComponent' cannot be used as a JSX component.
  Its instance type 'BuilderComponent' is not a valid JSX element.
    Type 'BuilderComponent' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.

```

I can’t seem to figure out why Typescript is confused here. The control does seem to be doing something.

Thanks for any help.