The "+ Add Block" button adds a block *after* the component instead of *inside* of it

Bugs
1

Issue:
I have a custom component which is empty as first, and receives children in it.
I added a component in it so the user can click the “+ Add Block” button and add whichever block he wants inside my component.

what happens is that builder adds the block the user chooses after the component instead of inside of it.

My stack:
Next.js

My Code:

export const MyComponent: React.FC<Props> = ({ children, ...props }) => {
  return (
    <div
      style={{
        width: "800px",
        height: "200px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        border: "1px solid #cccccc",
        color: "#cccccc",
      }}
    >
      <GlobalStyle />

      {Array.isArray(children) && children.length > 0 ? (
        React.Children.map(children, (child, index) => {
          return (
            <div
              style={{
                width: "200px",
                height: "200px",
              }}
              key={`${index}`}
            >
              {child}
            </div>
          );
        })
      ) : (
        <BuilderBlocks
          parentElementId={props.builderBlock.id}
          style={{
            width: "200px",
            height: "200px",
          }}
        />
      )}
    </div>
  );
};

const MyComponentWithChildren = withChildren(MyComponentWithChildren);

Builder.registerComponent(MyComponentWithChildren, {
  name: "MyComponentWithChildren",
  inputs: [],
});

Video:

2

Hi @neri,

You may find help at our forum post How to Add Dynamic Editing Regions to Custom Components

3

Hi @manish-sharma this example doesn’t work for me