# Passing Props down to child components

**URL:** <https://forum.builder.io/t/passing-props-down-to-child-components/2887>\
**Category:** Technical Questions\
**Tags:** react\
**Created:** [November 15, 2022, 10:40pm UTC](https://forum.builder.io/t/passing-props-down-to-child-components/2887 "2022-11-15T22:40:16Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![QNZach](https://avatars.discourse-cdn.com/v4/letter/q/e79b87/32.png) [@QNZach](https://forum.builder.io/u/QNZach)\
**Post date:** [November 15, 2022, 10:40pm UTC](https://forum.builder.io/t/passing-props-down-to-child-components/2887/1 "2022-11-15T22:40:16Z")

</div>

**What are you trying to accomplish**  
I am trying to pass a prop to a child componenet.  
For example. I have a Section component with a background color. I want to be able to send that background color to the child as a prop so I can make a variant theme within this custom component.

Is it possible to pass props from a Custom Component to it’s Child Custom component?

---

<div class="post-metadata">

**Author:** ![nicke920](https://avatars.discourse-cdn.com/v4/letter/n/ce73a5/32.png) [@nicke920](https://forum.builder.io/u/nicke920)\
**Post date:** [November 15, 2022, 11:25pm UTC](https://forum.builder.io/t/passing-props-down-to-child-components/2887/2 "2022-11-15T23:25:47Z")

</div>

Hi there!

Builder has [this](https://forum.builder.io/t/how-to-access-data-from-builder-in-a-react-custom-component/2618) article with more information about passing Builder state into a custom component that you may find useful. More commonly you can also do the opposite and pass state from your code into Builder with the `data` prop on the `<BuilderComponent>`.

As well, I found [this on the Github Repo](https://github.com/BuilderIO/builder/tree/main/packages/react#passing-data-and-functions-down) about passing data and functions down

Hope this was able to clarify things a bit further! Please let us know if you have any further questions.

---

<div class="post-metadata">

**Author:** ![QNZach](https://avatars.discourse-cdn.com/v4/letter/q/e79b87/32.png) [@QNZach](https://forum.builder.io/u/QNZach)\
**Post date:** [November 16, 2022, 8:26pm UTC](https://forum.builder.io/t/passing-props-down-to-child-components/2887/3 "2022-11-16T20:26:40Z")

</div>

Thanks for the replay @nicke920 !

I have looked through what you sent me. But still not exactly sure what I am doing wrong after a few attempts to pass a color prop from the custom Section component to it’s Child component and use it as a variant.

See code example below:

This below a CustomSection component I have where a user can select a `color` via a Enum.  
Once the user sets that `color`. I want to be able to pass that color value down to whatever child element is rendered within that to be able to change the colors on that as well.

```auto
import { Builder, withChildren } from '@builder.io/react'; // import withChildren

export function CustomSection(props) {
  const colorVariants = {
    red: "bg-red-500",
    blue: "bg-blue-500",
    green: "bg-green-500",
  };

  return (
    <div className={`py-16 md:py-30 ${colorVariants[props.color]}`}>
      {/* I want to pass props.color to the child elements */}
      {props.children}
    </div>
  );
}

export const CustomSectionWithBuilderChildren = withChildren(CustomSection)

export default CustomSection;

Builder.registerComponent(CustomSectionWithBuilderChildren, {
  name: 'Section',
  defaultChildren: [
    {
      '@type': '@builder.io/sdk:Element',
      component: { name: 'Text', options: { text: 'I am child text block!' } }
    }
  ],
  inputs: [
    {
      name: 'color',
      type: 'enum',
      enum: ['red', 'blue', 'green'],
    },
  ]
})

```

The Child Component here should be using a `props.colorPassedFromParent` or whatever named prop to return the color from the parent component (in this case, the `CustomSection`)

```auto
import { Builder } from '@builder.io/react'; // import withChildren

export function CustomChild(props) {

  const colorVariants = {
    red: "text-grey-900",
    blue: "text-white",
    green: "text-white",
  };

  return (
    <div className='py-16 md:py-30'>
      {/* I want props.color available here, passed from the parent. */}
      <p className={colorVariants[props.colorPassedFromParent]}>{props.title}</p>
    </div>
  );
}

export default CustomChild;

Builder.registerComponent(CustomChild, {
  name: 'CustomChild',
  inputs: [
    { name: 'title', type: 'richText', defaultValue: 'I am a title', required: true },
  ]
})

```

I guess my question is, is this possible with the `{props.children}` method of rendering child components? Or would I have to make a Section or Data model or something like that?

---

<div class="post-metadata">

**Author:** ![nicke920](https://avatars.discourse-cdn.com/v4/letter/n/ce73a5/32.png) [@nicke920](https://forum.builder.io/u/nicke920)\
**Post date:** [November 17, 2022, 7:41pm UTC](https://forum.builder.io/t/passing-props-down-to-child-components/2887/5 "2022-11-17T19:41:04Z")

</div>

Hi Zach,

Thank you for you patience. We have a taken a look at your request and was able to come up with a solution. You were very close!! What was missing was in your parent component, you needed to wrap {props.children} in a Content Provider and pass your props through a value prop on it.

I made a quick little video of me replicating the code you have provided on my own end, and walked through how I was able to pass down data into a child component. Please check out the Loom link below:

- [Loom | Free Screen & Video Recording Software | Loom](https://www.loom.com/share/abc910a4ef1e46dd9bc406cc31926b2a)

Hope this was able to clarify things a bit further and as always, feel free to reach out if you have any more questions!

---

<div class="post-metadata">

**Author:** ![QNZach](https://avatars.discourse-cdn.com/v4/letter/q/e79b87/32.png) [@QNZach](https://forum.builder.io/u/QNZach)\
**Post date:** [November 18, 2022, 6:44pm UTC](https://forum.builder.io/t/passing-props-down-to-child-components/2887/6 "2022-11-18T18:44:42Z")

</div>

Ahh ok, gotcha. Thanks for the detailed video was super helpful! I was hoping for something that was more in the line of like just passing the props down instead of using Context. But I can make that work for our needs potentially.

A question I have is, is there a more dynamic way to pass the props down instead of instead of importing a specific parent component’s context. This forces the child element to always need to be within that parent.

IE:  
I have a `Section` Component, and import that color context into a `Feature`.  
This is an example of the Components Parent/Child structure:

```nohighlight
-Section Component(color)
--Feature Component(color)

```

But if I want to use the `Feature` component in a card for example, How can I change the color of the card and pass that prop/data down to the child as well? In the below example I would need a Feature component that imports the context from a `Card` instead of the `Section`:

```nohighlight
-SectionComponent(color1)
--Grid
---Card(color2)
----Feature(color2)

```

In this example, I would need 2 `Features`, one that imports the context from the `Section`, and one that imports the context from the `Card`.

So is there a more dynamic way to pass prop/data from one custom component?

---

<div class="post-metadata">

**Author:** ![QNZach](https://avatars.discourse-cdn.com/v4/letter/q/e79b87/32.png) [@QNZach](https://forum.builder.io/u/QNZach)\
**Post date:** [November 21, 2022, 3:35pm UTC](https://forum.builder.io/t/passing-props-down-to-child-components/2887/7 "2022-11-21T15:35:08Z")

</div>

Just seeing if there is any more advice with what I am trying to achieve @nicke920

---

<div class="post-metadata">

**Author:** ![QNZach](https://avatars.discourse-cdn.com/v4/letter/q/e79b87/32.png) [@QNZach](https://forum.builder.io/u/QNZach)\
**Post date:** [November 22, 2022, 6:41pm UTC](https://forum.builder.io/t/passing-props-down-to-child-components/2887/8 "2022-11-22T18:41:08Z")

</div>

Let me know if there’s a better way to achieve this, as shopping around CMS’ to use and trying to make a decision fairly quickly

---

<div class="post-metadata">

**Author:** ![nicke920](https://avatars.discourse-cdn.com/v4/letter/n/ce73a5/32.png) [@nicke920](https://forum.builder.io/u/nicke920)\
**Post date:** [November 22, 2022, 10:16pm UTC](https://forum.builder.io/t/passing-props-down-to-child-components/2887/9 "2022-11-22T22:16:18Z")

</div>

Hi Zach,

Thanks for reaching back.

Hmm, that’s interesting! This seems to be more of a React centric question, however would you be able to outline your exact use case for this, in which case we may be able to tailor an exact solution for your use case