Hi-
I am trying to create a custom JSX component to show an event and have a structured data and then be able to drag the component onto a page in the builder visual editor and then bind it to an instance of my event structured data type. What I am trying isn’t working though as I assumed that I would get an object in the props of my component that I can read to render the data. Can someone tell me what I am doing wrong? Here is what my structured content looks like:
const content = {
“results”: [
{
“lastUpdatedBy”: “YKRZYQ4lx5hVipxOABWD0DaLFRZ2”,
“folders”: ,
“data”: {
“image”: “https://cdn.builder.io/api/v1/image/assets%2Fdab2c090bedd4df4a94f37f92c780b69%2F0e3c1019ee4d435fb88a97f69ef2e75f”,
“address”: {
“zip”: “28806”,
“city”: “Asheville”,
“address1”: “835 Brevard Rd”,
“name”: “Hampton Inn & Suites Biltmore Area”,
“state”: “NC”,
“url”: “Available Rooms - Hampton Inn & Suites Asheville Biltmore Area”
},
“endDate”: “Sun Nov 19 2023 19:00:00 GMT-0500 (Eastern Standard Time)”,
“registrationOpen”: true,
“description”: “
IMPORTANT: You must be able to attend all four days of the class in order to register.
”,“dates”: [
{
“eventDay”: {
“date”: “Thu Nov 16 2023 00:00:00 GMT-0500 (Eastern Standard Time)”,
“startTime”: “8:00AM”,
“endTime”: “7:00 PM”
}
},
{
“eventDay”: {
“date”: “Fri Nov 17 2023 00:00:00 GMT-0500 (Eastern Standard Time)”,
“startTime”: “8:00AM”,
“endTime”: “7:00 PM”
}
},
{
“eventDay”: {
“date”: “Sat Nov 18 2023 00:00:00 GMT-0500 (Eastern Standard Time)”,
“startTime”: “8:00AM”,
“endTime”: “7:00 PM”
}
},
{
“eventDay”: {
“date”: “Sun Nov 19 2023 00:00:00 GMT-0500 (Eastern Standard Time)”,
“startTime”: “8:00AM”,
“endTime”: “7:00 PM”
}
}
],
“eventType”: “In Person”,
“title”: “Silva Life & Intuition 4-Day Immersion Experience”,
“eventdate”: “Thu Nov 16 2023 00:00:00 GMT-0500 (Eastern Standard Time)”,
“eventCode”: “202311ASH”,
“region”: “Asheville, NC”,
“startDate”: “Thu Nov 16 2023 08:00:00 GMT-0500 (Eastern Standard Time)”,
“registrationDeadline”: “Mon Nov 06 2023 23:00:00 GMT-0500 (Eastern Standard Time)”
},
“modelId”: “8fb4301f21614d1cbfbc0cd1d54e3070”,
“query”: ,
“published”: “published”,
“firstPublished”: 1698503221406,
“testRatio”: 1,
“lastUpdated”: 1698505097943,
“createdDate”: 1698502871898,
“createdBy”: “YKRZYQ4lx5hVipxOABWD0DaLFRZ2”,
“meta”: {
“kind”: “data”,
“lastPreviewUrl”: “”
},
“variations”: {},
“name”: “202311ASH”,
“id”: “6c1d45c1eb264d908618545c0a9d4cfb”,
“rev”: “lz2boon2gqq”
},
{
“lastUpdatedBy”: “YKRZYQ4lx5hVipxOABWD0DaLFRZ2”,
“folders”: ,
“data”: {
“eventCode”: “2023-11-ASH”,
“image”: “https://cdn.builder.io/api/v1/image/assets%2Fdab2c090bedd4df4a94f37f92c780b69%2Fff2e2e886b9e4fabbb47483505c13c97”,
“address”: {
“zip”: “30346”,
“city”: “Atlanta”,
“address1”: “4565 Ashford Dunwoody Rd”,
“name”: “Hampton Inn & Suites Perimeter Dunwoody”,
“state”: “GA”,
“url”: “Available Rooms - Hampton Inn & Suites by Hilton Atlanta Perimeter Dunwoody”
},
“endDate”: “Sun Jan 21 2024 19:00:00 GMT-0500 (Eastern Standard Time)”,
“registrationOpen”: true,
“dates”: [
{
“eventDay”: {
“date”: “Thu Jan 18 2024 00:00:00 GMT-0500 (Eastern Standard Time)”,
“startTime”: “8:00AM”,
“endTime”: “7:00 PM”
}
},
{
“eventDay”: {
“date”: “Fri Jan 19 2024 00:00:00 GMT-0500 (Eastern Standard Time)”,
“startTime”: “8:00AM”,
“endTime”: “7:00 PM”
}
},
{
“eventDay”: {
“date”: “Sat Jan 20 2024 00:00:00 GMT-0500 (Eastern Standard Time)”,
“startTime”: “8:00AM”,
“endTime”: “7:00 PM”
}
},
{
“eventDay”: {
“date”: “Sun Jan 21 2024 00:00:00 GMT-0500 (Eastern Standard Time)”,
“startTime”: “8:00AM”,
“endTime”: “7:00 PM”
}
}
],
“eventType”: “In Person”,
“title”: “Silva Life & Intuition 4-Day Immersion Experience”,
“region”: “Atlanta, GA”,
“registrationDeadline”: “Wed Jan 10 2024 23:00:00 GMT-0500 (Eastern Standard Time)”,
“startDate”: “Thu Jan 18 2024 08:00:00 GMT-0500 (Eastern Standard Time)”,
“eventdate”: “Thu Jan 18 2024 00:00:00 GMT-0500 (Eastern Standard Time)”
},
“modelId”: “8fb4301f21614d1cbfbc0cd1d54e3070”,
“query”: ,
“published”: “published”,
“firstPublished”: 1698503546240,
“testRatio”: 1,
“lastUpdated”: 1698505162871,
“createdDate”: 1698502596780,
“createdBy”: “YKRZYQ4lx5hVipxOABWD0DaLFRZ2”,
“meta”: {
“kind”: “data”,
“lastPreviewUrl”: “”
},
“variations”: {},
“name”: “202401ATL”,
“id”: “30f15c83376940518c3270dec7246e16”,
“rev”: “lz2boon2gqq”
}
]
}
My jsx component looks like this:
function EventTeaser(props) {
let event;
if (!props.event) {
event = getDefaultContent();
} else {
event = props.event;
}
const className = props.className ? props.className : “”;
const startDate = new Date(event.startDate);
const dateOptions1 = {
weekday: “long”,
year: “numeric”,
month: “short”,
day: “numeric”,
};
const dateOptions2 = {
year: “numeric”,
month: “short”,
day: “numeric”,
};
const localizedDate = startDate.toLocaleDateString(undefined, dateOptions1);
return (
{" "}
{event.title}
)};
And my builder-registry entry looks like this:
Builder.registerComponent(
dynamic(() => import(“./components/ui/event-teaser”)),
{
name: “EventTeaser”,
inputs: [
{ name: “event”, type: “object” },
],
}
);
Any thoughts on how I am able to get access to content that I bind to this component in the visual editor? This has to be possible, but I can’t find the documentation on how to exactly do it.
Thanks,
John