My Page elements from Builder aren't loading in my React App

[Kintu]

Hi All! I’m trying to load the components from my Builder.io project into my React App but the items don’t render.

This is the page I’m trying to render:
import React from ‘react’

import { BuilderComponent, builder, Builder } from ‘@builder.io/react’

builder.init(‘YOUR_KEY’)

var useState, useEffect, location

const MyComponent = () => {

const [builderContentJson, setBuilderContentJson] = useState(null)

useEffect(() => {

builder.get('page', { url: location.pathname })

  .promise().then(setBuilderContentJson)

}, )

return

}

export default MyComponent

This is my App.js file:
import React from ‘react’

import {BrowserRouter as Router, Routes, Route, Link} from “react-router-dom”;

import MyComponent from “./Pages/Landing”

export default () => (

<Routes>

  <Route path="/" component={MyComponent} />

</Routes>

);

Could anyone know what I could be doing wrong?

[ancheetah]

Hi @Kintu, welcome to the forum! It looks like there is a line missing in the MyComponent definition. It should return something like <BuilderComponent model="page" content={builderContentJson} />. If you could share a Codesandbox with your code I can help you debug further. Here is our React starter which might help too: builder/examples/react at main · BuilderIO/builder · GitHub

[Kintu]

Hi @ancheetah!

I added the return line but the page still doesn’t seem to be rendering.

Here’s my Codesandbox link to the page I am trying to render: solitary-fog-kxgrdb - CodeSandbox

Here’s my Codesandbox link to my App.js: solitary-fog-kxgrdb - CodeSandbox

Maybe you could take a look at my code & see where I’m going wrong?

[ancheetah]

Hey @Kintu, thanks for sharing the codesandbox! It looks like you are using react-router-dom v6 which is currently not backwards compatible and has several breaking changes you can read about in the link below. Our react starter uses v5 and would be affected by changes to <Route component>, <Route render> and <Switch> if upgraded to v6 at this time. I would recommend downgrading to v5.3 and using <Switch> instead of <Routes> for the easiest path forward or refactoring your routing completely to v6. That should get your app up and running!

React Router | Upgrading from v5

[Kintu]

Hi @ancheetah! Thanks so much for the help: I managed to get my page to render! Now I have a new query. This is how my page looks like in the when Builder renders it:

This is how my react app looks like when I render the page:

Could you have any ideas as to why the buttons aren’t showing the same text in my React App?

[ancheetah]

No problem, glad I could help! That is strange. If you inspect the button on your dev server, is the button text there (see screenshot)? I was not able to reproduce this on my localhost with your landing page. After I forked your sandbox and downgraded to react-router-dom v5 I had to make a couple changes to your landing page template which you can see here but it works fine for me.