Children's key is missing

[You Xu]

Issue: There is something wrong with children's key.
Example: The expected output should be

<RowItem key="1-1">
    <RadioButton 
        key="1-1-0" 
        checked={false} 
        disabled={false} 
        label="auto" 
        name="1-1" 
        tabIndex="0"
    />
</RowItem>

But I got an output without RadioButton's key:

<RowItem key="1-1">
    <RadioButton 
        checked={false} 
        disabled={false} 
        label="auto" 
        name="1-1" 
        tabIndex="0"
    />
</RowItem>

I am sure the radio button element is correct:

      { '$$typeof': Symbol(react.element),
        type: [Function: RadioButton],
        key: '1-1-0',
        ref: null,
        props: 
         { label: 'auto',
           tabIndex: '0',
           disabled: false,
           checked: false,
           name: '1-1' },
        _owner: null,
        _store: {} }

Any suggestions about this?

[Armand Abric]

Hello @yoyoyooo, did you have a more complete example to show us?

I just check our test suite, we have use case with some key usage:

react-element-to-jsx-string/src/index.spec.js

Lines 713 to 718 in 768cce0

   it('reactElementToJSXString(<div aprop="test" key="yes" />', () => { 
     expect(reactElementToJSXString(<div aprop="test" key="yes" />)).toEqual( 
       `<div 
   key="yes" 
   aprop="test" 
 />` 

[You Xu]

I think this test case is not suitable to my problem because there is only one div. My problem is if both child and parent have its key attribute, the child's key cannot been shown. I can give another example based on your test case.

Input

reactElementToJSXString(
	<div aprop="test" key="yes">
		<div aprop="test" key="yes" />
	</div>
)

Output

<div
  key="yes"
  aprop="test"
>
  <div aprop="test" />
</div>

The inner div's key is missing.

[Daniel Hara]

Looks like this issue is still happening in version 15.0.0:

Input:

import React from "https://esm.sh/react@18.2.0";
import reactElementToJsxString from "https://esm.sh/react-element-to-jsx-string@15.0.0";

console.log(reactElementToJsxString(
	<div aprop="test" key="yes">
		<div aprop="test" key="yes" />
	</div>
));

Output:

"<div
  key='yes'
  aprop='test'
>
  <div aprop='test' />
</div>"

To reproduce: https://codepen.io/danielhara/pen/GReQOPX?editors=1111

[Daniel Hara]

@armandabric , @yoyoyooo , I've created this PR to fix this bug: #841 🚀