deepFind()

Returns the first element in the children array (and its children) that satisfies the provided testing function.

deepFind(
  children: ReactNode | ReactNode[],
  findFn: (child: ReactNode, index?: number, children?: ReactNode[]): ReactNode,
): ReactNode | undefined

Arguments

children

The children array from the element where is used.

findFn

Funcion to be called recursively each element (and its children) of the children array. Returns the first element that satisfies the provided testing function. 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 find was called upon.

Return Value

A new children array with the elements and their children that get produced by the callback function.

Example

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

interface Props {
  children?: ReactNode;
}

const DeepFound = ({ children }: Props): ReactElement => (
  <div>{deepFind(children, (child: ReactNode) => (child as ReactElement).type === 'i')}</div>
);

const Example = (): ReactElement => (
  <DeepFound>
    <b>1</b>
    <span>
      <i>2</i>
    </span>
    <i>3</i>
  </DeepFound>
);

render(<Example />, document.body)

// Result:
// <div>
//   <i>2</i>
// </div>