Problem with creation a component with 2 columns that accept children component to drag and drop in visual editor

Technical Questions
1

I have a component with two columns and each column need to receive a block, this code is working in parts because when I add child component in a column in the visual editor, it’s adding the child component in the two columns automaticaly, but I need to add separated, how to do it?

example code:

import React, { useState } from ‘react’
import { Container, Column } from ‘./styles’;
import { BuilderBlocks } from ‘@builder.io/react’;

type Props = {
left?: boolean;
right?: boolean;
builderBlock?: any;
};

function TestComponent({ left, right, builderBlock }: Props) {

return (


{ }

  <Column right={right}>
    { <BuilderBlocks blocks={builderBlock.children} parentElementId={builderBlock.id} dataPath="this.children" /> }
  </Column>

</Container>

)
}

export default TestComponent

I can’t use left or right props because these props are used to define which column will be largest.

2

Hello, @Luiz!

For assistance, you can refer to the following resources:

  1. Builder.io Documentation - Adding Editable Regions to Custom Components
  2. Builder.io GitHub - Columns.tsx Implementation

These links provide detailed information that should help you navigate through your queries. If you have any further questions, feel free to ask!

3

Can you give some simple example please? I’ve tried this links before.

Just an axample a component with two columns with children prop and that accept drag and drop other component in visual editor in each column. please