Children's key is missing

[yoyoyooo]

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?

[armandabric]

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"
	/>`

[yoyoyooo]

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.

[DanielHara]

Looks like this issue is still happening in version 15.0.0:

Input:

import React from "https://esm.sh/[email protected]";
import reactElementToJsxString from "https://esm.sh/[email protected]";

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

[DanielHara]

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