Clone functional components in React

Question

I'm trying to modify and clone the child elements of a component I'm creating and recently noticed that my children type changes depending on how I pass children>.

For example, if I pass JSX as a child:

<MyComponent>
  <div>Hello</div>
</MyComponent>

When I inspect the children structure in MyComponent, I can see the object as follows:

{
  '$$typeof': Symbol(react.element),
  type: 'div',
  key: null,
  ref: null,
  props: { children: 'hello' },
  _owner: null,
  _store: {}
}

Since props.children exists, React.cloneElement can use it directly.

If I create a functional component like this:

const Hello: React.FC = () => <div>hello</div>;

and try to use it like this:

<MyComponent>
  <Hello/>
</MyComponent>

Then the structure of the children object becomes like this:

{
  '$$typeof': Symbol(react.element),
  type: [Function: Hello],
  key: null,
  ref: null,
  props: {},
  _owner: null,
  _store: {}
}

I can no longer use React.cloneElement unless I call children.type(), but I can't find much documentation on that.

Why does this happen? Is this expected? Is calling children.type() the only way to clone the entire tree of children?

Answer 1

Hello

is a div and is a function that returns a div, so obviously they are not the same thing. There is an empty object as props because it has no child objects and we are not passing it a property with a value, so props is {}.

What you really want to access and clone are the child elements of the parent JSX element returned, regardless of their props.
The parent JSX element returned is actually children.type() (what the function returns) which has the children wrapped in it (Hello), so children.type().props.children is also present here so you can clone it.