# Recursive react element cloning not working

**URL:** https://forum.kirupa.com/t/recursive-react-element-cloning-not-working/640588
**Category:** programming
**Created:** [September 23, 2019, 4:26pm UTC](https://forum.kirupa.com/t/recursive-react-element-cloning-not-working/640588 "2019-09-23T16:26:40Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![nazanin](https://avatars.discourse-cdn.com/v4/letter/n/8797f3/32.png) [@nazanin](https://forum.kirupa.com/u/nazanin)
#### Post date: [September 23, 2019, 4:26pm UTC](https://forum.kirupa.com/t/recursive-react-element-cloning-not-working/640588/1 "2019-09-23T16:26:40Z")

</div>

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:

```auto
    recursiveTags = (divChild: React.ReactElement): any => {
    	if (
    		divChild.props &&
    		Array.isArray(divChild.props.children) &&
    		divChild.props.children.length > 0
    	) {
    		divChild.props.children.map(item => {
    			this.recursiveTags(item);
    		});
    	}
    	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 = React.Children.map(
			this.props.children,
			child => {
				if (child && React.isValidElement(child)) {
					let v = this.recursiveTags(child);
					return v;
				}
		)};

```

Main.js

```auto
    						<Form
    							metaFields={this.state.form}
    							onSubmit={this.submitForm}
    							onDataChanged={this.onData}
    						>
    							<div className='row'>
    								<div className='col-md-6 col-sm-12'>
    									<Editor id='input1' control='input1' />
    								</div>
    								<div className='col-md-6 col-sm-12'>
    									<Editor id='lasttname' control='lasttname' />
    								</div>
    							</div>
    							 <button type='submit' className='btn btn-dark float-right'>
    								Submit
    							</button>
    						</Form>

```

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [September 24, 2019, 5:38pm UTC](https://forum.kirupa.com/t/recursive-react-element-cloning-not-working/640588/2 "2019-09-24T17:38:21Z")

</div>

I didn’t look at it in too much detail but what caught my eye was this:

```
		divChild.props.children.map(item => {
			this.recursiveTags(item);
		});

```

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 divChild.props.children.map(item => {
			return this.recursiveTags(item);
		});

```

or more simply

```
		return divChild.props.children.map(this.recursiveTags);
```

---

<div class="post-metadata">

### Author: ![nazanin](https://avatars.discourse-cdn.com/v4/letter/n/8797f3/32.png) [@nazanin](https://forum.kirupa.com/u/nazanin)
#### Post date: [September 26, 2019, 5:41am UTC](https://forum.kirupa.com/t/recursive-react-element-cloning-not-working/640588/3 "2019-09-26T05:41:00Z")

</div>

Thank you Senocular for your respond. I even tried with return but didn’t work.  
However, to solve that, I use [react-children-utilities](https://github.com/fernandopasik/react-children-utilities) 😌