当使用 cloneElement 在组件 props.children 上传递方法时，React，Typescript，递归映射中出现“.map 不是函数”错误

Question

I am a react newbie, and trying to write a CustomFormComp that will be used like below, I will have some form element components too, which will be used like InputComponent .
The child Components ( InputComponent ) need to get a method from the parent component( CustomFormComp ) to handle onChnage and lift up their state to CustomFormComp , although they should be able to combine onChange with a given method to them as callbacks.
And also if inner components bind correctly I should be able to pass them some data.

import React, { Component } from "react";
import CustomFormComp from "../Form";
import InputComponent from "../FormElements/InputComponent";

interface IState { }

interface IProps { }

interface FormElData {
  [key: string]: string;
}

export class CustomForm extends Component<IProps, IState> {
  render() {
    const formData: FormElData = {
      email: "someone@some-mail.com",
      phone: "sdfsdf",
      address: "asdhf akshdfkahsdkahsdflka hsfnasdk f"
    };

    return (
      <CustomFormComp FormData={formData}>
        <h2>f</h2>
        asd
        <h3>asdf</h3>
        <div className="c1">
          <div className="c2">
            <div className="c3">
              <InputComponent label="email: " name="email" />
            </div>
            <div className="c33"></div>
          </div>
          <div className="c22"></div>
        </div>
        <InputComponent label="phone: " name="phone" />
      </CustomFormComp>
    );
  }
}

So far this is my customFromComp :

import React, { Component, ReactNode, Fragment } from "react"

interface FormElData {
    [key: string]: string
}

interface IState {
    FormData: {
        [key: string]: string
    }
}

type ICustomFormChildren = Array<null | React.ReactChild> //  | React.ReactChildren

interface IProps {
    FormData: FormElData
    children: ICustomFormChildren
}

class CustomFormComp extends Component<IProps, IState> {
    state = {
        FormData: {}
    }

    constructor(props: IProps) {
        super(props)
        this.handleInputChange = this.handleInputChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
        this.state.FormData = this.props.FormData
    }

    componentDidMount() {
        this.setState({
            FormData: this.props.FormData
        })
    }

    handleInputChange(inputData: FormElData) {
        const newFormData: any = { ...this.state.FormData }
        newFormData[inputData.name] = inputData.value

        this.setState({
            FormData: newFormData
        })
    }

    handleSubmit(event: React.FormEvent) {
        event.preventDefault()
        console.log(this.state)
    }

    recursiveClone(children: ICustomFormChildren): ICustomFormChildren {
        return (children).map((child, index: number) => {
            let value: string

            if (React.isValidElement(child)) {
                if (
                    child.props &&
                    this.state.FormData &&
                    (this.state.FormData as any)[child.props.name]) {
                    value = (this.state.FormData as any)[child.props.name]

                    return React.cloneElement(child, {
                        onChange: this.handleInputChange.bind(this),
                        key: index,
                        value: value
                    })
                } else if (!child.props || !Object.keys(child.props).length) {
                    return <Fragment key={index}>{child}</Fragment>
                } else {
                    console.log(Array.isArray(child.props.children), child.props.children)
                    return React.cloneElement(
                        child,
                        { key: index },
                        this.recursiveClone(child.props.children)
                    )
                }
            } else {
                return <Fragment key={index}>{child}</Fragment>
            }
        })
    }

    render() {
        const newChildren = this.recursiveClone(this.props.children)

        return (
            <form style={{ direction: "ltr" }} onSubmit={this.handleSubmit}>
                {newChildren}
            </form>
        )
    }
}

export default CustomFormComp

and this is my InputComponent :

import React, { Component } from 'react'

interface inputData {
  name: string,
  label: string,
  value?: string,
  onChange?(e:any): void
}

class InputComponent extends React.Component<inputData> {
  constructor(props:inputData) {
    super(props)
    this.onChange = this.onChange.bind(this)
  }

  onChange(e:any) {
    this.props.onChange && this.props.onChange({
      name: this.props.name,
      value: e.target.value
    })
  }

  render() {
    const value:string | undefined = this.props.value
    const name:string = this.props.name

    return (
      <fieldset>
        <label>
          {this.props.label}
          <input name={name} value={value} onChange={this.onChange} />
        </label>
      </fieldset>
    )
  }
}

export default InputComponent

Now I think It should work but some types error prevent page from loading, this is the error:

**UPDATE**

Main problem here is this:
The first time that i run the map it works fine, when I pass the child.props.children to in recursion it does not recognize the new argument(children which is child.props.children) and it trow an error.

Answer 1

The problem is that children in react are not always an array, if you have only one child it is not an array.

Your code will work if you force recursive clone to send an array when there is only one child. See here:

recursiveClone(children: ICustomFormChildren): ICustomFormChildren {
    return children.map((child, index: number) => {
      let value: string;

      if (React.isValidElement(child)) {
        if (
          child.props &&
          this.state.FormData &&
          (this.state.FormData as any)[child.props.name]
        ) {
          value = (this.state.FormData as any)[child.props.name];

          return React.cloneElement(child, {
            onChange: this.handleInputChange.bind(this),
            key: index,
            value: value
          });
        } else if (!child.props || !Object.keys(child.props).length) {
          return <Fragment key={index}>{child}</Fragment>;
        } else {
          console.log(
            Array.isArray(child.props.children),
            child.props.children
          );
          if (!Array.isArray(child.props.children)) {
            return React.cloneElement(
              child,
              { key: index },
              this.recursiveClone([child.props.children])
            );
          }
          return React.cloneElement(
            child,
            { key: index },
            this.recursiveClone(child.props.children)
          );
        }
      } else {
        return <Fragment key={index}>{child}</Fragment>;
      }
    });
  }

I added this if in your else

if (!Array.isArray(child.props.children)) {
            return React.cloneElement(
              child,
              { key: index },
              this.recursiveClone([child.props.children])
            );
          }

I tested it here in this https://codesandbox.io/s/new-surf-d17rk