reactjs - React.Children.map recursively? -

i'm building react component rendering html form , i'm finding need recursively iterate through children of parent form component in order add props children components of type.

an example (in jsx):

<form>     <p>personal information</p>     <input name="first_name" />     <input name="last_name" />     <input name="email" />     <label>         enter birthday         <input name="birthday" type="date" />     </label> </form> 

in example, i'm using react.children.map inside form component, , inside map function i'm checking child's "type" , child's "type.displayname" determine element i'm dealing (either native html element or 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 react.children.map shallowly iterates through this.props.children, , check children of children of children, etc. need add props input components know when display errors, , color error message should displayed, etc. in example above, birthday input not receive necessary props, because wrapped in label component.

any plan react.children.map have "recursive" mode or other utility out there can accomplish i'm trying do?

at end of day, write single function maps through each , every child (even nested ones) in order perform operation on (in case cloning).

while not baked react, possible:

function recursivemap(children, cb) {   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, cb)       });     }      return cb(child); }