reactjs - React.Children.map recursively?

Question

I'm building a React Component for rendering an HTML form and I'm finding the need to recursively iterate through all children of my parent Form component in order to add extra props to only children components of a certain Type.

An example (in JSX):

<Form>
    <p>Personal Information</p>
    <Input name="first_name" />
    <Input name="last_name" />
    <Input name="email" />
    <Label>
        Enter Your Birthday
        <Input name="birthday" type="date" />
    </Label>
</Form>

In this example, I'm using React.Children.map inside my Form component, and then inside the map function I'm checking the child's "type" and the child's "type.displayName" to determine what element I'm dealing with (either a native HTML element or a ReactElement):

var newChildren = React.Children.map(this.props.children, function(child) {
    if (is.inArray(child.type.displayName, supportedInputTypes)) {
      var extraChildProps = {
        alertColor: this.props.alertColor,
        displayErrors: this.state.displayErrors
      }
      return React.cloneElement(child, extraChildProps);
    } else {
      return child;
    }
  }.bind(this));

My problem is that React.Children.map only shallowly iterates through this.props.children, and I would like it to also check children of children of children, etc. I need to add props to only my Input components so that they know when to display errors, and which color the error message should be displayed, etc. In the example above, the birthday input does not receive the necessary props, because it is wrapped in a Label component.

Any plan for React.Children.map to have a "recursive" mode or any other utility out there that can accomplish what I'm trying to do?

At the end of the day, I would like to write a single function that maps through each and every child (even nested ones) in order to perform an operation on it (in this case cloning).

Answer 1

While not baked into React, this is certainly possible:

import React from "react";

function recursiveMap(children, fn) {
  return React.Children.map(children, child => {
    if (!React.isValidElement(child)) {
      return child;
    }

    if (child.props.children) {
      child = React.cloneElement(child, {
        children: recursiveMap(child.props.children, fn)
      });
    }

    return fn(child);
  });
}

If you'd like to avoid copy / pasting the above you can also use this npm package I authored.