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.

Sign up for GitHub

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

Jump to bottom

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
Labels
bug unconfirmed

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:

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

@DanielHara DanielHara linked a pull request Jan 30, 2024 that will close this issue
Open
@DanielHara
Copy link

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

@DanielHara DanielHara mentioned this issue Jan 30, 2024
Open
DanielHara added a commit to DanielHara/react-element-to-jsx-string that referenced this issue Jan 30, 2024
@DanielHara
fix: keep key in child elements, fixes algolia#301
7876b72
DanielHara added a commit to DanielHara/react-element-to-jsx-string that referenced this issue Jan 30, 2024
@DanielHara
fix: keep key in child elements, fixes algolia#301
ce3796c
DanielHara added a commit to DanielHara/react-element-to-jsx-string that referenced this issue Jan 30, 2024
@DanielHara
fix: keep key in child elements, fixes algolia#301
bb921d1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug unconfirmed
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: keep key in child elements, fixes #301 DanielHara/react-element-to-jsx-string
3 participants
@armandabric @yoyoyooo @DanielHara