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

fix: style prop no longer passed to React.Fragment #601

Merged
merged 2 commits into from
Oct 4, 2022
Merged

fix: style prop no longer passed to React.Fragment #601

merged 2 commits into from
Oct 4, 2022

Conversation

CTNicholas
Copy link
Contributor

What kind of change does this pull request introduce?

Bug fix

What is the current behavior?

Currently getting this error when using Sandpack React:

Invalid prop `style` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.

I traced back the error back to this point in the code.

What is the new behavior?

Don't apply the style prop to React.Fragment

What steps did you take to test this? This is required before we can merge, make sure to test the flow you've updated.

It seemed fine in CodeSandbox projects, but I have done no more testing. Please check everything works!

@codesandbox
Copy link

codesandbox bot commented Oct 2, 2022

CodeSandbox logoCodeSandbox logo  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 2, 2022

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit c9418a1:

Sandbox Source
Sandpack Configuration

@@ -93,6 +92,13 @@ export const Sandpack: SandpackInternal = (props) => {
height: props.options?.editorHeight, // use the original editor height
};

const RightColumn: React.FC<{ children: React.ReactNode }> = ({ children }) =>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hummm... I'm afraid that this will remount everything and its children on every render.

What about conditionally passing the props to the RightColumn? Something like this:

const rightColumnProps = useMemo(() => hasRightColumn ? { style } : {}, [hasRightColumn])

<RightColumn {...rightColumnProps}>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow yep, I wasn't thinking, haha. Updated 👍

Copy link
Member

@danilowoz danilowoz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you! No more warnings on tests!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants