deepForEach()

Executes a provided function once on each child (and its children) on a children array.

deepForEach(
  children: ReactNode,
  forEachFn: (child: ReactNode, index?: number, children?: ReactNode[]): void,
): void

Arguments

children
The children array from the element where is used.
forEachFn
Funcion to be called recursively each element (and its children) of the children array. Returns undefined. It accepts three arguments:
child
The current child element being processed.
index
The index of the current child element being processed.
children
The children array that forEach was called upon.

Return Value

undefined

Example

import React, { ReactElement, ReactNode } from 'react';
import { render } from 'react-dom';
import { deepForEach } from 'react-children-utilities';

interface Props {
  children?: ReactNode;
}

const DeepForEached = ({ children }: Props): ReactElement => {
  const items: ReactNode[] = [];
  deepForEach(children, (child: ReactNode) => {
    if (child && (child as ReactElement).type === 'b') {
      items.push((child as ReactElement).props.children);
    }
  });
  return <div>{items}</div>;
};

const Example = (): ReactElement => (
  <DeepForEached>
    <b>1</b>
    <b>2</b>
    <span>
      <b>3</b>
    </span>
    <i>non matching</i>
    <div>
      <div>
        <b>4</b>
      </div>
    </div>
    example
  </DeepForEached>
);

render(<Example />, document.body)

// Result:
// <div>1234</div>