Unable to view changes made in custom component

Technical Questions CMS
1 
const Component = () => <div></div>

export const MyComponent = withChildren(Component);
Builder.registerComponent(MyComponent, {
  name: "Above",
  defaultChildren: [
    {
      "@type": "@builder.io/sdk:Element",
      component: {
        name: "Heading",
        options: {
          text: "You can edit the contents of this example!",
          type: "h4",
        },
      },
    } 
  ],
});

I am currently trying to make a custom component which acts as a wrapper for all other components in my ReactJS app. This code snippet does not appear to display the Heading and only appears when I edit the JSX in Builder by adding a random space and saving it, which then creates a box.

When I try to add another Builder element, Image, to my custom component, it renders as 0px height as well. I have tried setting my custom component. I have also tried doing const Component = () => <div style={{height:"auto"}}></div> but it still renders as 0px height.

Can I know what I am doing wrong? Thanks in advance!

2

Hi @hellovivita :wave:

There are a couple of things you can resolve in your code to make your component display and function as expected.

  1. Your custom component isn’t rendering with a height of 0px. Instead, the children aren’t being displayed because the children aren’t being rendered. To resolve this you can change your code to include props.children like this:

const Component = (props) => <div>{props.children}</div>;

  1. The default children aren’t displaying because “Header” isn’t a default component (unless you already have a custom component named “Header”). Instead this should be text or a block and you can change the options as you see fit.
defaultChildren: [
    {
      "@type": "@builder.io/sdk:Element",
      component: {
        name: "Text",
        options: {
          text: "You can edit the contents of this example!"
       }
      }
    }
]

We have an open source component that has a full example of using withChildren here that may be helpful. You can also view another working example here.

3

Thanks a lot! This was the exact problem with my code!