Find React Child in Children Recursively Using a Find Function

find-react-child-recursively.js

import React from 'react';

export function findReactChildRecursively(children, findFunction) {
  const found = React.Children.toArray(children).find(findFunction);

  if (found) {
    return true;
  } else if (children?.props?.children) {
    findReactChildRecursively(children.props.children);
  }

  return false;
}

index.js

import React from 'react';
import {findReactChildRecursively} from './find-react-child-recursively.js';

function MyComponent({children}) {
  // Example: find whether an MDX A tag exists within
  // the children passed to this component
  const foundMdxATag = findReactChildRecursively(
    children,
    (child) => child?.props?.mdxType === 'a',
  );
}