# Not able to add block below my custom component content

**URL:** <https://forum.builder.io/t/not-able-to-add-block-below-my-custom-component-content/7049>\
**Category:** Visual Editor Help\
**Tags:** visual-editor, react, nextjs\
**Created:** [December 30, 2024, 5:39pm UTC](https://forum.builder.io/t/not-able-to-add-block-below-my-custom-component-content/7049 "2024-12-30T17:39:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Umang\_001](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/umang_001/32/4296_2.png) [@Umang\_001](https://forum.builder.io/u/Umang_001)\
**Post date:** [December 30, 2024, 5:39pm UTC](https://forum.builder.io/t/not-able-to-add-block-below-my-custom-component-content/7049/1 "2024-12-30T17:39:55Z")

</div>

config file :-

```auto
import type { Component } from "@builder.io/sdk";

const SeoSectionConfig: Component = {
	name: "SeoSection",
	inputs: [
		{
			name: "heading",
			type: "string",
			required: true,
			defaultValue: "Start your weight loss journey",
			friendlyName: "Heading",
			helperText: "The main heading of AssessmentCTA",
		},
		{
			name: "subheading",
			type: "string",
			required: true,
			defaultValue: "Assessments typically take between 5-10 minutes.",
			friendlyName: "Subheading",
			helperText: "The subheading displayed below the main heading",
		},
		{
			name: "links",
			friendlyName: "Anchor Links for Navigation Sidebar",
			type: "array",
			required: true,
			subFields: [
				{
					name: "anchorlinktext",
					friendlyName: "Text Displayed on the Link",
					type: "string",
					required: true,
				},
				{
					name: "sectionid",
					friendlyName: "Target Section ID (Scroll to Section)",
					type: "string",
					required: true,
				},
				{
					name: "description",
					friendlyName: "Description of the Section",
					type: "string",
				},
				{
					name: "blocks",
					type: "uiBlocks",
					defaultValue: {
						blocks: [],
					},
					helperText:
						"This is an editable region where you can drag and drop blocks.",
				},
			],
		},
	],
};

export default SeoSectionConfig;

```

code :-

```auto
/* eslint-disable @typescript-eslint/no-explicit-any */
import type { BuilderElement } from "@builder.io/react";
import { BuilderBlocks } from "@builder.io/react";
import React from "react";

import BlogNavigationSidebar from "../BlogNavigationSidebar";
import StickyAnchorWrapper from "../StickyAnchorWrapper";

export interface SEOSectionProps {
	heading: string;
	subheading: string;
	links?: {
		anchorlinktext: string;
		sectionid: string;
		description: string;
		blocks: React.ReactNode[];
	}[];
	builderBlock: BuilderElement;
}

const SeoSection = ({
	heading,
	subheading,
	links,
	builderBlock,
}: SEOSectionProps) => {
	return (
		<div className='flex min-h-screen w-full flex-col gap-[40px] bg-transparent px-4 py-16 sm:gap-[32px] sm:px-[32px] sm:py-[80px] lg:flex-row lg:gap-[20px] lg:px-[40px]'>
			<aside className='flex w-full flex-col gap-6 bg-transparent sm:gap-[32px] lg:w-[47%] lg:gap-[40px]'>
				<div className='flex flex-col gap-2 sm:gap-3'>
					{heading && (
						<h2 className='text-3xl font-medium leading-lg tracking-[-0.02em] text-grey-900'>
							{heading}
						</h2>
					)}
					{subheading && (
						<p className='text-sm leading-sm text-grey-600'>{subheading}</p>
					)}
				</div>
				<div className='flex flex-col gap-3 sm:gap-4'>
					<p className='text-sm leading-sm text-grey-500'>Table of contents</p>
					{links && <BlogNavigationSidebar links={links} />}
					{links && (
						<StickyAnchorWrapper links={links} className='flex lg:hidden' />
					)}
				</div>
			</aside>

			<div
				id='abc'
				className='flex w-full flex-col gap-[28px] bg-transparent sm:gap-[32px] lg:gap-[40px]'
			>
				{links?.map((link, index) =>
					link ? (
						<section
							key={index}
							id={link.sectionid}
							className='flex flex-col gap-3'
						>
							{link?.anchorlinktext && (
								<h5 className='text-2xl font-medium tracking-[-0.01em] text-grey-900'>
									{link.anchorlinktext}
								</h5>
							)}
							{link?.description && (
								<p className='text-base font-normal leading-base text-grey-700'>
									{link.description}
								</p>
							)}
							<BuilderBlocks
								child
								parentElementId={builderBlock?.id}
								blocks={links[index].blocks}
								dataPath={`links.${index}.blocks`}
							/>
						</section>
					) : null,
				)}
			</div>
		</div>
	);
};

export default SeoSection;

```

builder screen

before addign block :-

 ![builder1](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/a/abff6a86f712a2de5ffb22578cdf0a465d433168.png)

after adding block:-

 ![Builder2](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/d8b23abdeacf906440f8040482a23534e7459fe5.png)

can someone plz help

---

<div class="post-metadata">

**Author:** ![sheema](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@sheema](https://forum.builder.io/u/sheema)\
**Post date:** [December 31, 2024, 9:17am UTC](https://forum.builder.io/t/not-able-to-add-block-below-my-custom-component-content/7049/2 "2024-12-31T09:17:03Z")

</div>

Hey @Umang_001 , In the second screenshot, I noticed you’ve added a new text block. To add more blocks, you can either use the “+” icon for the “Insert” section at the top left corner or click the “+” icon at the bottom right corner of the existing text block.

 ![custom components](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/8/8ade0c8317a3bb7aa425e685e33acfda8b0ced66.png)

Let me know if I’ve misunderstood your request or if you need further assistance!

---

<div class="post-metadata">

**Author:** ![Umang\_001](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/umang_001/32/4296_2.png) [@Umang\_001](https://forum.builder.io/u/Umang_001)\
**Post date:** [December 31, 2024, 9:27am UTC](https://forum.builder.io/t/not-able-to-add-block-below-my-custom-component-content/7049/3 "2024-12-31T09:27:23Z")

</div>

the problem is when i try the way you suggested then its will go below the whole custom component but i want in my custom component

---

<div class="post-metadata">

**Author:** ![sheema](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@sheema](https://forum.builder.io/u/sheema)\
**Post date:** [December 31, 2024, 9:31am UTC](https://forum.builder.io/t/not-able-to-add-block-below-my-custom-component-content/7049/4 "2024-12-31T09:31:32Z")

</div>

You can add the child block in the custom component by clicking on “Add Block” under **Section Headline**.

 ![Builder2 (1)](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/9/93d093431305ec629f6a94586c9c6fcc4c6c24f6.png)

---

<div class="post-metadata">

**Author:** ![Umang\_001](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/umang_001/32/4296_2.png) [@Umang\_001](https://forum.builder.io/u/Umang_001)\
**Post date:** [December 31, 2024, 9:39am UTC](https://forum.builder.io/t/not-able-to-add-block-below-my-custom-component-content/7049/5 "2024-12-31T09:39:21Z")

</div>

when i do this the child block apper below seo section which i dont want

---

<div class="post-metadata">

**Author:** ![sheema](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@sheema](https://forum.builder.io/u/sheema)\
**Post date:** [December 31, 2024, 12:27pm UTC](https://forum.builder.io/t/not-able-to-add-block-below-my-custom-component-content/7049/6 "2024-12-31T12:27:52Z")

</div>

Hey @Umang_001 , you can use `canHaveChildren:true,` to add children to any custom components. I have tested this on your component and I am able to add blocks in your custom component.

 ![Screenshot 2024-12-31 at 5.51.27 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/6/6a543bbccf21536be806f22414930d7660a13f70.png)

Your code should look like this -

```auto
import type { Component } from "@builder.io/sdk";

const SeoSectionConfig: Component = {
	name: "SeoSection",
    canHaveChildren: true,
	inputs: [
		{
			name: "heading",
			type: "string",
			required: true,
			defaultValue: "Start your weight loss journey",
			friendlyName: "Heading",
			helperText: "The main heading of AssessmentCTA",
		},
		{
			name: "subheading",
			type: "string",
			required: true,
			defaultValue: "Assessments typically take between 5-10 minutes.",
			friendlyName: "Subheading",
			helperText: "The subheading displayed below the main heading",
		},
		{
			name: "links",
			friendlyName: "Anchor Links for Navigation Sidebar",
			type: "array",
			required: true,
			subFields: [
				{
					name: "anchorlinktext",
					friendlyName: "Text Displayed on the Link",
					type: "string",
					required: true,
				},
				{
					name: "sectionid",
					friendlyName: "Target Section ID (Scroll to Section)",
					type: "string",
					required: true,
				},
				{
					name: "description",
					friendlyName: "Description of the Section",
					type: "string",
				},
				{
					name: "blocks",
					type: "uiBlocks",
					defaultValue: {
						blocks: [],
					},
					helperText:
						"This is an editable region where you can drag and drop blocks.",
				},
			],
		},
	],
};

export default SeoSectionConfig;

```

Here is a link to our documentation for the [Child Blocks in Custom components](https://www.builder.io/c/docs/custom-components-children). Let me know if there are any further questions that I can help you with.