Combining symbols with react components

Technical Questions
, , , ,
1

Hello,

Let’s say we have an array that includes a bunch of page data (actually we are retrieving data from Airtable). So we want to combine Builder designs with this data and auto-generate pages in Gatsby. So does it make sense to you? Can we combine our symbol layouts with data sources?

const pages = [
{
title: “Page title 1”,
slug: “/slug-1”,
body: “content”,
image: “/image.jpg”
},
{
title: “Page title 2”,
slug: “/slug-2”,
body: “content”,
image: “/image.jpg”
},
];

2

Hi @mehmetkose!

Yes, you can combine content within Builder with external data sources such as Airtable. One way to do that is to use data binding within the Builder editor. These two tutorials go over how to accomplish that: https://www.builder.io/c/docs/guides/connecting-api-data and https://www.builder.io/c/docs/guides/advanced-data.

The other way to do it is to pass data into the Builder component as a prop within your code. To do that, have a look at this forum post, particularly the section on “passing down data and actions.” Once you pass that data into the component, it can be used within your symbol. The data will be available on the state object.

1 Like
3

Yeah, I’ve solved that last week.
For anyone who looking for a solution;

import { BuilderComponent } from "@builder.io/react";

import component

<BuilderComponent
          renderLink={Link}
          name="your-model-name"
          content={yourBuilderModel}
          data={{your: "data"}}
        />

use like this

2 Likes