Compound components lose parent reference

[AndrewLeedham]

It seems when using compound components the parent reference is lost. I created a repro here: https://repl.it/@AndrewLeedham56/react-element-to-jsx-compound-component-repro#index.jsx

console.log(
  reactElementToJSXString(
    <Component>
      <Component.Compound text="Hello World!"/>
    </Component>
  )
);
// Outputs
/*
<Component>
  <Compound text="Hello World!" />
</Component>
*/

I was expecting it to output:

<Component>
  <Component.Compound text="Hello World!" />
</Component>

[armandabric]

Hi @AndrewLeedham, thanks to report this.

When your create a component with the <Component.Compound text="Hello World!" /> in fact you a using the Component.Compound expression as a reference to the function Compound attached to the Object Component. When executed at run time, the referenced function get named by the attribute name Compound, the parent object Component is lost.

If you do:

console.log(<Component.Compound text="Hello World!" />);

You will see something like this:

As you see the function is named Compound not Component.Compound

There is no way to determine the original JSX component name in that case.

[AndrewLeedham]

Thanks for the explainer @Spy-Seth makes sense. I had a poke around in the code for this and it seems it uses displayName so I managed to override the Babel auto-generated version with essentially Component.Compound, and it works. Fairly straightforward albeit somewhat hacky workaround for my use case 👍