deepMap()

Creates a new children array with results of calling a provided function called recursively on every child (and its children) of the array.

deepMap(
  children: ReactNode,
  mapFn: (child: ReactNode, index?: number, children?: ReactNode[]): boolean,
): ReactNode[]

Arguments

children
The children array from the element where is used.
mapFn
Funcion to be called recursively each element (and its children) of the children array. Returns the new element result of the call. 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 map 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 { deepMap } from 'react-children-utilities';

interface Props {
  children?: ReactNode;
}

const DeepMapped = ({ children }: Props): ReactElement => (
  <div>
    {deepMap(children, (child: ReactNode) => {
      if (child && (child as ReactElement).type === 'b') {
        return cloneElement(child as ReactElement, {
          ...(child as ReactElement).props,
          className: 'mapped',
        });
      }
      return child;
    })}
  </div>
);

const Example = (): ReactElement => (
  <DeepMapped>
    <b>1</b>
    <b>2</b>
    test text
    <span>
      <b>3</b>
    </span>
    <div>
      <div>
        <b>4</b>
      </div>
    </div>
  </DeepMapped>
);

render(<Example />, document.body)

// Result:
// <div>
//   <b class="mapped">1</b>
//   <b class="mapped">2</b>
//   test text
//   <span>
//     <b class="mapped">3</b>
//   </span>
//   <div>
//     <div>
//       <b class="mapped">4</b>
//     </div>
//   </div>
// </div>