Cloning React Children

reactchildren.tsx

import * as React from "react";
import { Frame, addPropertyControls, ControlType } from "framer";

export function Component({ childComponent }) {
  return (
    <div style={{ width: "100%" }}>
      {React.Children.map(childComponent, (child, index) => {
        return React.cloneElement(child, {
          width: "100%",
          key: index,
          // Additional Props
        });
      })}
    </div>
  );
}

addPropertyControls(Component, {
  childComponent: {
    type: ControlType.ComponentInstance,
    title: "Child Component",
  },
});

@addisonschultz I was wondering if there is a way to also manipulate properties of children contained inside linked components. For example if I link a frame with a text component inside. How can I manipulate the text value of that child component? Since in the example above the width and key are properties of the root linked component (frame).

@netgfx You'd have to parse the properties one level deeper, but instead, I think it might be easier to add an override onto the text element of the text you're linking to! I can see if there are some other ways as well, feel free to invite me or send me the project on Discord as well if you want!

Thanks for the reply. I'm trying to avoid overrides because they are slightly more difficult to explain to clients. I have achieved the above by doing this:

 {React.Children.map(props.components, (child, index) => {
                var childComp = React.Children.map(
                    child.props.children,
                    (item) => {
                        return React.cloneElement(item, {
                            text: props.text,
                        })
                    }
                )

                return React.cloneElement(child, {
                    width: "100%",
                    key: index,
                    children: childComp,
                    // Additional Props
                })
            })}