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

Updated to a more useful example. This will clone connected children in Framer, and give them full width, no matter what size it is on the canvas.

I'm getting '...' expected error for some reason

@netgfx are you still getting this? I'm not able to reproduce, but feel free to send me a file if you are still getting this

@addisonschultz It was my mistake, I was trying to add the map in the wrong place. This works great:

return (
        <Frame
            {...rest}
            background={props.background}
            visible={visible}
            //onTap={onTap}
            style={{
                color: "#fff",
                fontSize: 16,
                fontWeight: 600,
            }}
        >
            {React.Children.map(props.childComponent, (child, index) => {
                return React.cloneElement(child, {
                    width: "100%",
                    key: index,
                    // Additional Props
                })
            })}
        </Frame>
    )

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