deepFind()

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

deepFind(
  children: 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>