Displaying the page properties

Technical Questions
1

Hi Team,

I am trying to get the page properties in the react framework and for doing the same I am using the below code.

Can someone please help in identifying what could have gone wrong as the same page properties is working fine with svelte framework.

export const CatchAll = () => {
  const [notFound, setNotFound] = useState(false);
  const [content, setContent] = useState(null);
  const isPreviewingInBuilder = useIsPreviewing();

  return (
    <>
      {!notFound ? (
        <BuilderComponent
          model="page"
          contentLoaded={content => {
            setContent(content);
            if (!content && !isPreviewingInBuilder) {
              setNotFound(true);
            }
          }}
        >
          <div style={{ display: 'flex', justifyContent: 'center', padding: 100 }}>
            <CircularProgress color="inherit" disableShrink />
          </div>
        </BuilderComponent>
      ) : (
        <NotFound /> // Your 404 content
      )}
      <div>{content?.data?.title}</div>
    </>
  );
};

Builder content link

2

Hi @shaileshbassi, actually I think there is a typo in some of out strarters, like the React design system starter, which it looks like maybe you based this off of?

contentLoaded in our React SDK actually takes 2 variables, data and content . If you console log the two you will see they are different, with data actually corresponding to the object found within content at content.data

So in this example you would either want to updated contentLoaded to account for both inputs:

<BuilderComponent
          model="page"
          contentLoaded={(data, content) => {
            setContent(content);
            if (!content && !isPreviewingInBuilder) {
              setNotFound(true);
            }
          }}
        >
...
<div>{content?.data?.title}</div>

OR you could change the div to grab from the data object, something like:

<BuilderComponent
          model="page"
          contentLoaded={data => {
            setContent(data);
            if (!content && !isPreviewingInBuilder) {
              setNotFound(true);
            }
          }}
        >
<div>{data?.title}</div>

Hope this helps! I will file a ticket internally to update the starters and address this issue going forward