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

React 19 docs - do not advise to add a key in getLineProps + getTokenProps #244

Merged
merged 1 commit into from Apr 26, 2024

Conversation

slorber
Copy link
Contributor

@slorber slorber commented Apr 26, 2024

Starting React 18.3, this kind of code:

const lineTokens = line.map((token, key) => (
  <span key={key} {...getTokenProps({token, key})} />
));

leads to the following warning:

Warning: A props object containing a "key" prop is being spread into JSX:
  let props = {key: someKey, className: ..., children: ..., style: ...};
  <span {...props} />
React keys must be passed directly to JSX without using spread:
  let props = {className: ..., children: ..., style: ...};
  <span key={someKey} {...props} />
    at CodeBlockLine (webpack-internal:///../packages/docusaurus-theme-classic/lib/theme/CodeBlock/Line/index.js:10:26)

I think the doc is a bit confusing (it led us to historically write the code above, although it's not what you show in the examples) while the key should rather be kept outside the PRR API calls, not spreading it.

This should be enough:

const lineTokens = line.map((token, key) => (
  <span key={key} {...getTokenProps({token})} />
));

Type of Change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested?

Docusaurus fixing React v18.3 warnings: facebook/docusaurus#10079

Copy link

changeset-bot bot commented Apr 26, 2024

⚠️ No Changeset found

Latest commit: 8b49a1b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@carbonrobot
Copy link
Contributor

Appreciate the contribution! Will merge shortly

@carbonrobot carbonrobot merged commit e35950e into FormidableLabs:master Apr 26, 2024
1 check passed
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.

None yet

2 participants