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",
  },
});

@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
                })
            })}