Skip to content

Enable react/jsx-key for fragment shorthands#3002

Merged
koesie10 merged 1 commit intomainfrom
koesie10/jsx-key-rule
Oct 20, 2023
Merged

Enable react/jsx-key for fragment shorthands#3002
koesie10 merged 1 commit intomainfrom
koesie10/jsx-key-rule

Conversation

@koesie10
Copy link
Copy Markdown
Member

This will change ESLint to give an error when you do something like this:

{x.map((y) => <>{y.name}</>)}

In this case, there's no key being passed to the top-level element in a map. We should always explicitly pass in a key to make the best use of React. This can be fixed by doing this:

{x.map((y) => <Fragment key={y.id}>{y.name}</Fragment>)}

We ran into this in #2995: https://github.com/github/vscode-codeql/pull/2995/files#r1363990725

Checklist

  • CHANGELOG.md has been updated to incorporate all user visible changes made by this pull request.
  • Issues have been created for any UI or other user-facing changes made by this pull request.
  • [Maintainers only] If this pull request makes user-facing changes that require documentation changes, open a corresponding docs pull request in the github/codeql repo and add the ready-for-doc-review label there.

@koesie10 koesie10 requested a review from a team as a code owner October 20, 2023 14:06
Copy link
Copy Markdown
Contributor

@charisk charisk left a comment

Choose a reason for hiding this comment

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

Nice, thanks!

@koesie10 koesie10 merged commit 8c59423 into main Oct 20, 2023
@koesie10 koesie10 deleted the koesie10/jsx-key-rule branch October 20, 2023 14:44
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