Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Children's key is missing #301

Open
yoyoyooo opened this issue Jul 26, 2018 · 4 comments · May be fixed by #841
Open

Children's key is missing #301

yoyoyooo opened this issue Jul 26, 2018 · 4 comments · May be fixed by #841

Comments

@yoyoyooo
Copy link

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
Copy link
Collaborator

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:

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

@yoyoyooo
Copy link
Author

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
Copy link

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 DanielHara linked a pull request Jan 30, 2024 that will close this issue
@DanielHara
Copy link

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

DanielHara added a commit to DanielHara/react-element-to-jsx-string that referenced this issue Jan 30, 2024
DanielHara added a commit to DanielHara/react-element-to-jsx-string that referenced this issue Jan 30, 2024
DanielHara added a commit to DanielHara/react-element-to-jsx-string that referenced this issue Jan 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants