Recursive react element cloning not working

Hi guys,
I am trying to clone specific react component (Editor) in nested DOM which I find recursively, but all the children will be backed except clone ones, seems it didn’t affect Editor props.

Form component:

    recursiveTags = (divChild: React.ReactElement): any => {
    	if (
    		divChild.props &&
    		Array.isArray(divChild.props.children) &&
    		divChild.props.children.length > 0
    	) { => {
    	if (divChild.type === Editor) {
    		let newProps = {
    			meta: this.props.metaFields.fields[divChild.props["control"]],
    			metaVal: this.props.metaFields.fieldsValue[divChild.props["control"]],
    			onDataChanged: this.props.onDataChanged

    		return React.cloneElement(divChild as React.ReactElement<any>, newProps);
    	return divChild;
	render() {
		const childrenWithExtraProp =
			child => {
				if (child && React.isValidElement(child)) {
					let v = this.recursiveTags(child);
					return v;


    							<div className='row'>
    								<div className='col-md-6 col-sm-12'>
    									<Editor id='input1' control='input1' />
    								<div className='col-md-6 col-sm-12'>
    									<Editor id='lasttname' control='lasttname' />
    							 <button type='submit' className='btn btn-dark float-right'>

I didn’t look at it in too much detail but what caught my eye was this: => {
  1. the mapping isn’t doing anything because you’re not returning in the callback.
  2. you’re not doing anything with the mapped values, such as returning them back to the caller.

It’s a common mistake to miss returns in recursive functions. You probably want

		return => {
			return this.recursiveTags(item);

or more simply


Thank you Senocular for your respond. I even tried with return but didn’t work.
However, to solve that, I use react-children-utilities :relaxed: