deepFilter()

Creates a new children array with all elements that pass the test implemented by the provided function called recursively on every child (and its children) of the array.

deepFilter(
  children: ReactNode | ReactNode[],
  filterFn: (child: ReactNode, index?: number, children?: ReactNode[]): boolean,
): ReactNode[]

Arguments

children

The children array from the element where is used.

filterFn

Predicate to test recursively each element (and its children) of the children array. Return true to keep the element and false to remove it. 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 filter was called upon.

Return Value

A new children array with the elements and their children that pass the test. If no elements pass the test, an empty array will be returned.

Example

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

interface Props {
  children?: ReactNode;
}

const DeepFiltered = ({ children }: Props): ReactElement => (
  <div>
    {deepFilter(children, (item: ReactNode) =>
      Boolean(item && (item as ReactElement).type && (item as ReactElement).type === 'span'),
    )}
  </div>
);

const Example = (): ReactElement => (
  <DeepFiltered>
    <span>1</span>
    <span>2</span>
    <span>
      <strong>3</strong>
      <span>
        <strong>4</strong>
        <span>5</span>
      </span>
    </span>
  </DeepFiltered>
);

render(<Example />, document.body)

// Result:
// <div>
//   <span>1</span>
//   <span>2</span>
//   <span>
//     <span>
//       <span>5</span>
//     </span>
//   </span>
// </div>