// 👇 Create the styled component
const ParentWrapper = styled('div')`
  background: blue;
`;

// 👇 Create an actual React component
class Parent extends React.Component {
  renderChildren = () => {
    const { children } = this.props;
    // 👇 The <Parent /> renders it's children, but passes in this.props.gutter as the gutter to each child
    return React.Children.map(children, (child) => React.cloneElement(child, {
      gutter: this.props.gutter,
    }));
  }

  render() {
    return <ParentWrapper>{this.renderChildren()}</ParentWrapper>
  }
}

const Child = styled('div')`
  margin: ${props => props.gutter ? '10px' : null ;}
`

render() {
  return(
    <div>
      {/* 👇 The parent gets the gutter here */}
      <Parent gutter>
        <Child />
      </Parent>
    </div>
  )
}

function recursiveMap(children, fn) {
  return React.Children.map(children, child => {
    if (!React.isValidElement(child)) {
      return child;
    }

    if (child.props.children) {
      child = React.cloneElement(child, {
        children: recursiveMap(child.props.children, fn),
      });
    }

    return fn(child);
  });
}

const Parent = (props: any): ReactElement => (
  <div>
    {deepMap(props.children, (child: ReactNode) => {
      if (child) {
        return React.cloneElement(child as ReactElement, {
          ...(child as ReactElement).props,
          type: props.type,
        });
      }
      return child;
    })}
  </div>
);

Failed prop type: Invalid prop `children` of type `array` supplied to `ForwardRef(Tooltip)`, expected a single ReactElement.