Recursive react element cloning not working

programming
1

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
    	) {
    		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

    						<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>
2

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);
3

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: