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 public api key
go to Builder.io: Drag and drop Visual CMS and copy your PUBLIC api key
What are you trying to accomplish
Use the integration tutorial’ of React code in VSCode that flag “async” as "un
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
If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!
import { BuilderComponent, builder, useIsPreviewing } from ‘@builder.io/react’;
// Put your API key here
builder.init(‘I removed my API key’)
// set whether you’re using the Visual Editor,
// whether there are changes,
// and render the content if found
export default function CatchAllRoute() {
const isPreviewingInBuilder = useIsPreviewing();
const [notFound, setNotFound] = useState(false);
const [content, setContent] = useState(null);
useEffect( () => {
async fetchContent {
const content = await builder.get(‘page’, {
url: location.pathname
}).promise();
setContent(content);
setNotFound(!content);
}
}, [location.pathname]);
// if no page is found, return a 404 page
if (notFound && !isPreviewingInBuilder) {
return
}
// return the page when found
return (
<>
{content?.data.title}
{/* Render the Builder page */}
</>
);
}
