# Trouble with Dynamic Data Rendering in Builder.io

**URL:** <https://forum.builder.io/t/trouble-with-dynamic-data-rendering-in-builder-io/5650>\
**Category:** Technical Questions\
**Created:** [May 22, 2024, 11:29am UTC](https://forum.builder.io/t/trouble-with-dynamic-data-rendering-in-builder-io/5650 "2024-05-22T11:29:58Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![nathaniel](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/nathaniel/32/3835_2.png) [@nathaniel](https://forum.builder.io/u/nathaniel)\
**Post date:** [May 22, 2024, 11:29am UTC](https://forum.builder.io/t/trouble-with-dynamic-data-rendering-in-builder-io/5650/1 "2024-05-22T11:29:58Z")

</div>

Hello everyone,

I’m facing an issue with dynamically rendering content from Builder. io on my website. Even after following the documentation and tutorials, I’m getting errors when trying to display dynamic data.

I’m using React.js with the Builder. io React SDK to fetch and render content dynamically. My implementation involves querying Builder. io for content using the **builder.get()** method and then rendering it within my React components.

The error I’m facing is that while the initial fetch of content from Builder. io is successful, subsequent updates or changes to the content are not reflected dynamically on my website. Even though I’ve set up event listeners or callbacks to listen for changes in Builder. io content, the updates are not being propagated to my React components as expected.

I have double-checked my implementation code, including event listener setup and content update mechanisms, but I am not able to resolve the issue.

Can anyone provide suggestions for troubleshooting dynamic data rendering in Builder. io within a React.js environment?

Any help or guidance would be greatly appreciated!

Best regards,  
nathaniel

---

<div class="post-metadata">

**Author:** ![anon43891756](https://avatars.discourse-cdn.com/v4/letter/a/50afbb/32.png) [@anon43891756](https://forum.builder.io/u/anon43891756)\
**Post date:** [May 22, 2024, 12:35pm UTC](https://forum.builder.io/t/trouble-with-dynamic-data-rendering-in-builder-io/5650/2 "2024-05-22T12:35:55Z")

</div>

> [@nathaniel](#):
>
> I’m facing an issue with dynamically rendering content from Builder. io on my website. Even after following the documentation and tutorials, I’m getting errors when trying to display dynamic data.
> 
> I’m using React.js with the Builder. io React SDK to fetch and render content dynamically. My implementation involves querying Builder. io for content using the **builder.get()** method and then rendering it within my React components.
> 
> The error I’m facing is that while the initial fetch of content from Builder. io is successful, subsequent updates or changes to the content are not reflected dynamically on my website. Even though I’ve set up event listeners or callbacks to listen for changes in Builder. io content, the updates are not being propagated to my React components as expected.
> 
> I have double-checked my implementation code, including event listener setup and content update mechanisms, but I am not able to resolve the issue.
> 
> Can anyone provide suggestions for troubleshooting dynamic data rendering in Builder. io within a React.js environment?
> 
> Any help or guidance would be greatly appreciated!

Hi @nathaniel

Rendering dynamic content from [Builder.io](http://Builder.io) in a React.js environment can sometimes be challenging, especially when dealing with updates and real-time content propagation. Let’s go through some steps to troubleshoot and ensure your setup is correct, and address common pitfalls.

### Step-by-Step Troubleshooting Guide

#### Step 1: Verify [Builder.io](http://Builder.io) SDK Initialization

Ensure that the [Builder.io](http://Builder.io) SDK is initialized correctly with your public API key.

**Example** :

```javascript
import { builder } from '@builder.io/react';

builder.init('YOUR_PUBLIC_API_KEY');

```

#### Step 2: Fetching and Rendering Content

Make sure you are using the `builder.get()` method correctly to fetch the content and render it within your React components.

**Example** :

```javascript
import React, { useEffect, useState } from 'react';
import { BuilderComponent, builder } from '@builder.io/react';

builder.init('YOUR_PUBLIC_API_KEY');

const DynamicContent = ({ model, entryId }) => {
  const [content, setContent] = useState(null);

  useEffect(() => {
    const fetchContent = async () => {
      const fetchedContent = await builder.get(model, { query: { id: entryId }}).toPromise();
      setContent(fetchedContent);
    };

    fetchContent();
  }, [model, entryId]);

  return content ? <BuilderComponent model={model} content={content} /> : <p>Loading...</p>;
};

export default DynamicContent;

```

#### Step 3: Set Up Event Listeners for Real-Time Updates

[Builder.io](http://Builder.io) provides a way to listen for real-time content updates. Make sure you set up event listeners to refresh your content when changes are made.

**Example** :

```javascript
import { builder } from '@builder.io/react';

builder.init('YOUR_PUBLIC_API_KEY');

const subscribeToUpdates = (model, entryId, callback) => {
  const subscription = builder.subscribe({
    model,
    options: { entry: entryId }
  }, event => {
    if (event.type === 'update') {
      callback(event.data);
    }
  });
  return subscription;
};

// In your component
useEffect(() => {
  const subscription = subscribeToUpdates('page', 'YOUR_ENTRY_ID', (newContent) => {
    setContent(newContent);
  });

  return () => {
    if (subscription) {
      subscription.unsubscribe();
    }
  };
}, []);

```

#### Step 4: Ensure Correct Use of React State

When fetching dynamic content, ensure that the state is updated correctly to trigger a re-render of your component.

#### Step 5: Debug and Log

Add debug statements (console logs) to ensure that the content is being fetched and that the state is being updated correctly.

**Example** :

```javascript
useEffect(() => {
  const fetchContent = async () => {
    const fetchedContent = await builder.get('page', { query: { id: entryId }}).toPromise();
    console.log('Fetched Content:', fetchedContent);
    setContent(fetchedContent);
  };

  fetchContent();
}, [entryId]);

useEffect(() => {
  const subscription = subscribeToUpdates('page', entryId, (newContent) => {
    console.log('Content Update:', newContent);
    setContent(newContent);
  });

  return () => {
    if (subscription) {
      subscription.unsubscribe();
    }
  };
}, [entryId]);

```

#### Step 6: Confirm Content Updates in [Builder.io](http://Builder.io)

Verify in the [Builder.io](http://Builder.io) dashboard that the content is indeed being updated and published. Sometimes, changes may appear in the editor but need to be explicitly published.

#### Step 7: Check Network Requests

Use browser Developer Tools to inspect the network requests to [Builder.io](http://Builder.io) and ensure that updates are being fetched correctly.

### Sample Full Implementation

Here’s a sample full implementation that includes initialization, fetching, and real-time updates.

**App.js** :

```javascript
import React, { useEffect, useState } from 'react';
import { BuilderComponent, builder } from '@builder.io/react';
import './App.css';

builder.init('YOUR_PUBLIC_API_KEY');

const subscribeToUpdates = (model, entryId, callback) => {
  const subscription = builder.subscribe({
    model,
    options: { entry: entryId }
  }, event => {
    if (event.type === 'update') {
      callback(event.data);
    }
  });
  return subscription;
};

const App = () => {
  const [content, setContent] = useState(null);
  const model = 'page'; // Specify your model name
  const entryId = 'YOUR_ENTRY_ID'; // Specify your content entry ID

  useEffect(() => {
    const fetchContent = async () => {
      const fetchedContent = await builder.get(model, { query: { id: entryId }}).toPromise();
      console.log('Fetched Content:', fetchedContent);
      setContent(fetchedContent);
    };

    fetchContent();
  }, [model, entryId]);

  useEffect(() => {
    const subscription = subscribeToUpdates(model, entryId, (newContent) => {
      console.log('Content Update:', newContent);
      setContent(newContent);
    });

    return () => {
      if (subscription) {
        subscription.unsubscribe();
      }
    };
  }, [model, entryId]);

  return (
    <div className="App">
      {content ? <BuilderComponent model={model} content={content} /> : <p>Loading...</p>}
    </div>
  );
};

export default App;

```

By following these steps and ensuring proper setup and debugging, you should be able to dynamically render and update content from [Builder.io](http://Builder.io) in your React.js application. If the issue persists, further inspection using browser dev tools and network logs may help identify the source of the problem.

---

<div class="post-metadata">

**Author:** ![nathaniel](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/nathaniel/32/3835_2.png) [@nathaniel](https://forum.builder.io/u/nathaniel)\
**Post date:** [May 28, 2024, 1:32pm UTC](https://forum.builder.io/t/trouble-with-dynamic-data-rendering-in-builder-io/5650/3 "2024-05-28T13:32:36Z")

</div>

Hello

Thanks for sharing this [Step-by-Step Troubleshooting Guide](https://forum.builder.io/t/trouble-with-dynamic-data-rendering-in-builder-io/5650/2).

Thank you  
nathaniel