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

fix(theme-classic): add key prop for SimpleLinks map #6515

Merged
merged 1 commit into from
Jan 31, 2022
Merged

fix(theme-classic): add key prop for SimpleLinks map #6515

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions packages/docusaurus-theme-classic/src/theme/Footer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,10 +106,9 @@ function SimpleLinks({links}: {links: SimpleFooter['links']}) {
return (
<div className="footer__links">
{links.map((item, key) => (
<>
<React.Fragment key={key}>
Copy link
Collaborator

Choose a reason for hiding this comment

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

Looks like we could prevent this with ESLint rule (disabled by default atm):

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-key.md#checkfragmentshorthand-default-false

Copy link
Collaborator

Choose a reason for hiding this comment

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

Interestingly, this rule is disabled in airbnb because of "false positives". I think we can enable some React rules ourselves

Copy link
Collaborator

Choose a reason for hiding this comment

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

honnestly I never liked eslint airbnb, and many people have the same feeling

In the long term we should remove it imho

Copy link
Collaborator

Choose a reason for hiding this comment

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

I like it as a solution that just works... We aren't tied to it (while many others are forced to have a style guide and stick to it) so we can tweak it however we want

{item.html ? (
<span
key={key}
className="footer__link-item"
// Developer provided the HTML, so assume it's safe.
// eslint-disable-next-line react/no-danger
Expand All @@ -123,7 +122,7 @@ function SimpleLinks({links}: {links: SimpleFooter['links']}) {
{links.length !== key + 1 && (
<span className="footer__link-separator">·</span>
)}
</>
</React.Fragment>
))}
</div>
);
Expand Down