Map React Children Recursively

mapReactChildrenRecursively.ts

interface IOptions {
  predicate: (child: React.ReactChild) => boolean;
  props: { [key: string]: any };
}

function mapReactChildrenRecursively(children: React.ReactNode, options: IOptions): React.ReactNode {
  if (!options.predicate || !options.props) {
    return children;
  }

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

    if (options.predicate(child)) {
      return React.cloneElement(child, {
        children: mapReactChildrenRecursively(child.props.children, options),
        ...options.props,
      });
    }

    if (child.props.children) {
      return React.cloneElement(child, { children: mapReactChildrenRecursively(child.props.children, options) });
    }

    return child;
  });
}