How to use react-children-utilities - 3 common examples

const NavItem: React.FC = ({ children, hasChildren = false }) => {
  // @ts-ignore
  const foundActive = !!Children.deepFind(children, ({ props }) => props.active)
  const [isOpen, setIsOpen] = useState(foundActive && hasChildren)

  const classes = `
    rn-nav__list-item
    ${hasChildren ? 'has-children' : ''}
    ${isOpen ? 'is-open' : ''}
  `

  return (
    <li data-testid="nav-item"> {
        setIsOpen(hasChildren &amp;&amp; !isOpen)
      }}
    &gt;</li>

acc[val] = convert(restProps[val]);

        return acc; 
      },
      {}
    )
  );

  let keepImage = true;

  return (
    
      {Children.deepMap(children, (child) => {
        if (isImage(child)) {
          if (keepImage) {
            keepImage = false;
            return child;

          } else {
            return React.cloneElement(
              child,
              { ...child.props, style: mapHiddenImageStyle(child.props.style) }
            );
          }

        } else {
          return child;
        }
      })}

constructor (props) {
        super(props)

        const activeTab = Children.filter(props.children, (child) => { return child.props.active }).map((it) => {
            return it.props.id;
        })[0];

        this.state = {
            activeTab : activeTab || ""
        }

        this.tabs = {}
    }