# Data binding for custom component

**URL:** <https://forum.builder.io/t/data-binding-for-custom-component/3749>\
**Category:** Technical Questions\
**Tags:** visual-editor, react, nextjs\
**Created:** [June 21, 2023, 1:32pm UTC](https://forum.builder.io/t/data-binding-for-custom-component/3749 "2023-06-21T13:32:46Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![yuval222](https://avatars.discourse-cdn.com/v4/letter/y/d6d6ee/32.png) [@yuval222](https://forum.builder.io/u/yuval222)\
**Post date:** [June 21, 2023, 1:32pm UTC](https://forum.builder.io/t/data-binding-for-custom-component/3749/1 "2023-06-21T13:32:46Z")

</div>

Hey guys,

I created a wizard component that receives a list of steps.

```auto
export const Wizard: React.FC<any> = (props: any) => {
  const { steps, builderBlock } = props;

  return (
    <>
      {steps?.map((step: any, index: any) => {
        return (
          <BuilderBlocks
            key={index}
            child
            parentElementId={builderBlock && builderBlock.id}
            blocks={step.content}
            dataPath={`component.options.steps.${index}.content`}
          />
        );
      })}
    </>
  );
};

const WizardWithChildren = withChildren(Wizard);

Builder.registerComponent(WizardWithChildren, {
  name: "Wizard",
  noWrap: true,
  inputs: [
    {
      name: "steps",
      type: "list",
      subFields: [
        {
          name: "name",
          type: "string",
        },
        {
          name: "content",
          type: "uiBlocks",
          defaultValue: [],
        },
      ],
    },
  ],
});

```

Each step uses builderBlock and can be dynamically change.

I need to utilize the ‘name’ field from each step to generate a static page for each step using Next.js’ getStaticPaths. Since the component data is not accessible during the page building stage, I plan to add a new input field called ‘steps’ on the page input fields and bind it with the component. This approach will make the “steps” data accessible when constructing all the page variations using getStaticPaths.

**CURRENT ISSUE** - Each step includes input fields for both a name and content. However, when creating the new “steps” field in my page model, there is no “uiBlocks” type available. As a result, binding the data with the component won’t function properly

---

<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:** [June 23, 2023, 4:01pm UTC](https://forum.builder.io/t/data-binding-for-custom-component/3749/2 "2023-06-23T16:01:11Z")

</div>

Hi @yuval222,

Would it be possible for you to share a loom or screen recording explaining the requirements?

 ![Screenshot 2023-06-23 at 9.29.53 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/8/80158bba07b2e54263d765176eddcc6ee1bee809.jpeg)

> [@React custom component containing editable subcomponents](https://forum.builder.io/t/react-custom-component-containing-editable-subcomponents/25/2):
>
> Great Q @niall! We have a section in our docs that should help you out with this here [Using Your React Components in Builder.io - Builder.io](https://www.builder.io/c/docs/custom-react-components#text:children-in-custom-components)Easy mode For most cases of needing children, you just need to use our withChildren function, e.g. import { Builder, withChildren } from '@builder.io/react'; export const Hero = props =\> \<div className={heroStyles}\>{div}\</div\> const HeroWithBuilderChildren = withChildren(Hero) Builder.registerComponent(HeroWithBuilderChildren, { name: 'Hero', /…