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

Answer 1

I've made a small library to deal with the Children structure. You can check it here:

https://github.com/fernandopasik/react-children-utilities

In your case you can use the method deepMap:

import React from 'react';
import Children from 'react-children-utilities';

var newChildren = Children.deepMap(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));