Passing Props down to child components

Technical Questions
1

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?

2

Hi there!

Builder has this 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 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.

3

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.

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)

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?

5

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:

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

1 Like
6

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:

-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:

-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?

7

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

8

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

9

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