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

**URL:** <https://forum.builder.io/t/problem-with-creation-a-component-with-2-columns-that-accept-children-component-to-drag-and-drop-in-visual-editor/4846>\
**Category:** Technical Questions\
**Created:** [January 23, 2024, 2:26pm UTC](https://forum.builder.io/t/problem-with-creation-a-component-with-2-columns-that-accept-children-component-to-drag-and-drop-in-visual-editor/4846 "2024-01-23T14:26:29Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Luiz](https://avatars.discourse-cdn.com/v4/letter/l/f04885/32.png) [@Luiz](https://forum.builder.io/u/Luiz)\
**Post date:** [January 23, 2024, 2:26pm UTC](https://forum.builder.io/t/problem-with-creation-a-component-with-2-columns-that-accept-children-component-to-drag-and-drop-in-visual-editor/4846/1 "2024-01-23T14:26:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [January 23, 2024, 3:23pm UTC](https://forum.builder.io/t/problem-with-creation-a-component-with-2-columns-that-accept-children-component-to-drag-and-drop-in-visual-editor/4846/2 "2024-01-23T15:23:30Z")

</div>

Hello, @Luiz!

For assistance, you can refer to the following resources:

1. [Builder.io Documentation - Adding Editable Regions to Custom Components](https://www.builder.io/c/docs/custom-components-children#adding-editable-regions-to-custom-components)
2. [Builder.io GitHub - Columns.tsx Implementation](https://github.com/BuilderIO/builder/blob/main/packages/react/src/blocks/Columns.tsx)

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

---

<div class="post-metadata">

**Author:** ![Luiz](https://avatars.discourse-cdn.com/v4/letter/l/f04885/32.png) [@Luiz](https://forum.builder.io/u/Luiz)\
**Post date:** [January 23, 2024, 4:02pm UTC](https://forum.builder.io/t/problem-with-creation-a-component-with-2-columns-that-accept-children-component-to-drag-and-drop-in-visual-editor/4846/3 "2024-01-23T16:02:26Z")

</div>

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