eslint: Enable react/jsx-key rule (#39709)

This rule requires a `key` prop be specified on elements that it thinks probably need one, namely elements inside arrays or returned from iterators for `.map()` and the like. In practice most of the cases fixed here are probably pointless, since the arrays are never going to be sorted or modified at runtime. But it's easier to add a key than to write a comment justifing ignoring it in each case.
Automattic · Oct 10, 2024 · 391bb78 · 391bb78
1 parent 77a67a6
commit 391bb78
Show file tree

Hide file tree

Showing 27 changed files with 94 additions and 28 deletions.
diff --git a/projects/js-packages/components/changelog/add-eslint-react-jsx-key b/projects/js-packages/components/changelog/add-eslint-react-jsx-key
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Add `key` to React components in some stories. Should be no change to functionality.
+
+
diff --git a/projects/js-packages/components/components/button/stories/index.stories.tsx b/projects/js-packages/components/components/button/stories/index.stories.tsx
@@ -313,7 +313,7 @@ export const VariantsAndProps = () => {
 					<Text size="body-extra-small">no props</Text>
 				</Col>
 				{ variants.map( variant => (
-					<Col sm={ 4 } md={ 2 } lg={ 3 }>
+					<Col key={ 'normal-' + variant } sm={ 4 } md={ 2 } lg={ 3 }>
 						<Button { ...ButtonPrimary.args } variant={ variant } />
 					</Col>
 				) ) }
@@ -322,7 +322,7 @@ export const VariantsAndProps = () => {
 					<Text size="body-extra-small">size: small</Text>
 				</Col>
 				{ variants.map( variant => (
-					<Col sm={ 4 } md={ 2 } lg={ 3 }>
+					<Col key={ 'small-' + variant } sm={ 4 } md={ 2 } lg={ 3 }>
 						<Button { ...ButtonPrimary.args } variant={ variant } size="small" />
 					</Col>
 				) ) }
@@ -331,7 +331,7 @@ export const VariantsAndProps = () => {
 					<Text size="body-extra-small">weight: regular</Text>
 				</Col>
 				{ variants.map( variant => (
-					<Col sm={ 4 } md={ 2 } lg={ 3 }>
+					<Col key={ 'regular-' + variant } sm={ 4 } md={ 2 } lg={ 3 }>
 						<Button { ...ButtonPrimary.args } variant={ variant } weight="regular" />
 					</Col>
 				) ) }
@@ -340,7 +340,7 @@ export const VariantsAndProps = () => {
 					<Text size="body-extra-small">icon (cloud)</Text>
 				</Col>
 				{ variants.map( variant => (
-					<Col sm={ 4 } md={ 2 } lg={ 3 }>
+					<Col key={ 'icon-' + variant } sm={ 4 } md={ 2 } lg={ 3 }>
 						<Button
 							{ ...ButtonPrimary.args }
 							variant={ variant }
@@ -353,7 +353,7 @@ export const VariantsAndProps = () => {
 					<Text size="body-extra-small">disabled</Text>
 				</Col>
 				{ variants.map( variant => (
-					<Col sm={ 4 } md={ 2 } lg={ 3 }>
+					<Col key={ 'disabled-' + variant } sm={ 4 } md={ 2 } lg={ 3 }>
 						<Button { ...ButtonPrimary.args } variant={ variant } disabled />
 					</Col>
 				) ) }
@@ -362,7 +362,7 @@ export const VariantsAndProps = () => {
 					<Text size="body-extra-small">isDestructive</Text>
 				</Col>
 				{ variants.map( variant => (
-					<Col sm={ 4 } md={ 2 } lg={ 3 }>
+					<Col key={ 'destructive-' + variant } sm={ 4 } md={ 2 } lg={ 3 }>
 						<Button { ...ButtonPrimary.args } variant={ variant } isDestructive />
 					</Col>
 				) ) }
@@ -371,7 +371,7 @@ export const VariantsAndProps = () => {
 					<Text size="body-extra-small">isExternalLink</Text>
 				</Col>
 				{ variants.map( variant => (
-					<Col sm={ 4 } md={ 2 } lg={ 3 }>
+					<Col key={ 'external-' + variant } sm={ 4 } md={ 2 } lg={ 3 }>
 						<Button { ...ButtonPrimary.args } variant={ variant } isExternalLink />
 					</Col>
 				) ) }
@@ -380,7 +380,7 @@ export const VariantsAndProps = () => {
 					<Text size="body-extra-small">isLoading</Text>
 				</Col>
 				{ variants.map( variant => (
-					<Col sm={ 4 } md={ 2 } lg={ 3 }>
+					<Col key={ 'loading-' + variant } sm={ 4 } md={ 2 } lg={ 3 }>
 						<Button { ...ButtonPrimary.args } variant={ variant } isLoading />
 					</Col>
 				) ) }
@@ -389,7 +389,7 @@ export const VariantsAndProps = () => {
 					<Text size="body-extra-small">fullWidth</Text>
 				</Col>
 				{ variants.map( variant => (
-					<Col sm={ 4 } md={ 2 } lg={ 3 }>
+					<Col key={ 'fullwidth-' + variant } sm={ 4 } md={ 2 } lg={ 3 }>
 						<Button { ...ButtonPrimary.args } variant={ variant } fullWidth />
 					</Col>
 				) ) }

diff --git a/projects/js-packages/components/components/theme-provider/stories/index.stories.tsx b/projects/js-packages/components/components/theme-provider/stories/index.stories.tsx
@@ -62,7 +62,7 @@ const Section = ( { title, data, children = null } ) => (
 		<h1 className={ styles.title }>{ title }</h1>
 		<Container fluid>
 			{ Object.keys( data ).map( key => (
-				<Col lg={ 3 } className={ styles.box }>
+				<Col key={ key } lg={ 3 } className={ styles.box }>
 					<Container fluid horizontalGap={ 2 }>
 						<Col className={ styles.key }>{ key }</Col>
 						{ children && <Col className={ styles.example }>{ children( data[ key ] ) }</Col> }
@@ -103,7 +103,11 @@ Tokens.parameters = {
 export const Typographies = args => (
 	<div className={ styles[ 'instances-wrapper' ] }>
 		{ Object.keys( typography ).map( key => (
-			<div className={ styles[ 'font-instance' ] } style={ { fontSize: typography[ key ] } }>
+			<div
+				key={ key }
+				className={ styles[ 'font-instance' ] }
+				style={ { fontSize: typography[ key ] } }
+			>
 				{ args?.[ 'Text Instance' ] || `${ key } (${ typography[ key ] } )` }
 
 				<ClipboardButton variant="tertiary" text={ key } className={ styles[ 'copy-button' ] }>
@@ -125,6 +129,7 @@ export const Colors = () => (
 	<div className={ styles[ 'instances-wrapper' ] }>
 		{ Object.keys( colors ).map( key => (
 			<div
+				key={ key }
 				className={ styles[ 'color-instance' ] }
 				style={ { backgroundColor: colors[ key ], color: getContrast( colors[ key ] ) } }
 			>

diff --git a/projects/js-packages/connection/changelog/add-eslint-react-jsx-key b/projects/js-packages/connection/changelog/add-eslint-react-jsx-key
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Add `key` to DisconnectSurvey options. Should be no change to functionality.
+
+
diff --git a/projects/js-packages/connection/components/disconnect-survey/index.jsx b/projects/js-packages/connection/components/disconnect-survey/index.jsx
@@ -108,6 +108,7 @@ const DisconnectSurvey = props => {
 		return options.map( option => {
 			return (
 				<SurveyChoice
+					key={ option.id }
 					id={ option.id }
 					onClick={ setSelectedAnswer }
 					onKeyDown={ handleAnswerKeyDown }

diff --git a/projects/js-packages/publicize-components/changelog/add-eslint-react-jsx-key b/projects/js-packages/publicize-components/changelog/add-eslint-react-jsx-key
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Add `key` to Notice actions. Should be no change to functionality.
+
+
diff --git a/projects/js-packages/publicize-components/src/components/social-previews/instagram.js b/projects/js-packages/publicize-components/src/components/social-previews/instagram.js
@@ -34,7 +34,10 @@ export function Instagram( props ) {
 			<Notice
 				hideCloseButton
 				actions={ [
-					<ExternalLink href={ getRedirectUrl( 'jetpack-social-share-to-instagram' ) }>
+					<ExternalLink
+						key="learn-more"
+						href={ getRedirectUrl( 'jetpack-social-share-to-instagram' ) }
+					>
 						{ __( 'Learn more', 'jetpack' ) }
 					</ExternalLink>,
 				] }

diff --git a/projects/js-packages/social-logos/changelog/add-eslint-react-jsx-key b/projects/js-packages/social-logos/changelog/add-eslint-react-jsx-key
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Add `key` in React example to make it more correct.
diff --git a/projects/js-packages/social-logos/src/react/example.tsx b/projects/js-packages/social-logos/src/react/example.tsx
@@ -54,6 +54,7 @@ function SocialLogosExample() {
 
 	const allSocialLogos = SocialLogoData.map( logo => (
 		<SocialLogoItemExample
+			key={ logo.name }
 			name={ logo.name }
 			iconSize={ iconSize }
 			showIconNames={ showIconNames }

diff --git a/projects/packages/forms/changelog/add-eslint-react-jsx-key b/projects/packages/forms/changelog/add-eslint-react-jsx-key
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Add `key` in JetpackFieldControls controls. Should be no change to functionality.
+
+
diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js
@@ -107,6 +107,7 @@ const JetpackFieldControls = ( {
 
 	let fieldSettings = [
 		<ToggleControl
+			key="required"
 			label={ __( 'Field is required', 'jetpack-forms' ) }
 			className="jetpack-field-label__required"
 			checked={ required }
@@ -115,6 +116,7 @@ const JetpackFieldControls = ( {
 		/>,
 		! hidePlaceholder && (
 			<TextControl
+				key="placeholderField"
 				label={ __( 'Placeholder text', 'jetpack-forms' ) }
 				value={ placeholder || '' }
 				onChange={ value => setAttributes( { [ placeholderField ]: value } ) }
@@ -124,8 +126,9 @@ const JetpackFieldControls = ( {
 				) }
 			/>
 		),
-		<JetpackFieldWidth setAttributes={ setAttributes } width={ width } />,
+		<JetpackFieldWidth key="width" setAttributes={ setAttributes } width={ width } />,
 		<ToggleControl
+			key="shareFieldAttributes"
 			label={ __( 'Sync fields style', 'jetpack-forms' ) }
 			checked={ attributes.shareFieldAttributes }
 			onChange={ value => setAttributes( { shareFieldAttributes: value } ) }

diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx
@@ -54,7 +54,9 @@ const GlobalNotice = ( { message, title, options } ) => {
 	const [ isBiggerThanMedium ] = useBreakpointMatch( [ 'md' ], [ '>' ] );
 
 	const actionButtons = options.actions?.map( action => {
-		return <ActionButton customClass={ styles.cta } { ...action } />;
+		return (
+			<ActionButton key={ action.key || action.label } customClass={ styles.cta } { ...action } />
+		);
 	} );
 
 	return (

diff --git a/projects/packages/my-jetpack/_inc/components/product-detail-table/index.jsx b/projects/packages/my-jetpack/_inc/components/product-detail-table/index.jsx
@@ -316,6 +316,7 @@ const ProductDetailTable = ( {
 			}
 			actions={ [
 				<Button
+					key="get"
 					variant="secondary"
 					href={ `https://wordpress.org/plugins/${ pluginSlug }` }
 					isExternalLink

diff --git a/...ects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx b/...ects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx
@@ -297,7 +297,7 @@ export default function () {
 									actions={
 										tierPlansEnabled
 											? [
-													<Button isPrimary onClick={ upgradeClickHandler }>
+													<Button key="upgrade" isPrimary onClick={ upgradeClickHandler }>
 														{ showRenewalNotice ? renewalNoticeCta : upgradeNoticeCta }
 													</Button>,
 											  ]

diff --git a/projects/packages/my-jetpack/changelog/add-eslint-react-jsx-key b/projects/packages/my-jetpack/changelog/add-eslint-react-jsx-key
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Add `key` to some React `actions` props. Should be no change to functionality.
+
+
diff --git a/projects/packages/search/changelog/add-eslint-react-jsx-key b/projects/packages/search/changelog/add-eslint-react-jsx-key
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Add `key` to tag and cat lists in `SearchResultMinimal` to improve behavior if lists change at runtime.
diff --git a/projects/packages/search/src/instant-search/components/search-result-minimal.jsx b/projects/packages/search/src/instant-search/components/search-result-minimal.jsx
@@ -55,7 +55,7 @@ class SearchResultMinimal extends Component {
 					{ tags.length !== 0 && (
 						<ul className="jetpack-instant-search__search-result-minimal-tags">
 							{ tags.map( tag => (
-								<li className="jetpack-instant-search__search-result-minimal-tag">
+								<li key={ tag } className="jetpack-instant-search__search-result-minimal-tag">
 									<Gridicon icon="tag" size={ this.getIconSize() } />
 									<span className="jetpack-instant-search__search-result-minimal-tag-text">
 										{ tag }
@@ -67,7 +67,7 @@ class SearchResultMinimal extends Component {
 					{ cats.length !== 0 && (
 						<ul className="jetpack-instant-search__search-result-minimal-cats">
 							{ cats.map( cat => (
-								<li className="jetpack-instant-search__search-result-minimal-cat">
+								<li key={ cat } className="jetpack-instant-search__search-result-minimal-cat">
 									<Gridicon icon="folder" size={ this.getIconSize() } />
 									<span className="jetpack-instant-search__search-result-minimal-cat-text">
 										{ cat }

diff --git a/projects/plugins/jetpack/_inc/client/at-a-glance/scan.jsx b/projects/plugins/jetpack/_inc/client/at-a-glance/scan.jsx
@@ -307,8 +307,10 @@ class DashScan extends Component {
 		return (
 			<>
 				{ renderActiveCard( [
-					<h2 className="jp-dash-item__count is-alert">{ numberFormat( numberOfThreats ) }</h2>,
-					<p className="jp-dash-item__description">
+					<h2 key="header" className="jp-dash-item__count is-alert">
+						{ numberFormat( numberOfThreats ) }
+					</h2>,
+					<p key="description" className="jp-dash-item__description">
 						{ createInterpolateElement(
 							_n(
 								'Security threat found. <a>Click here</a> to fix them immediately.',

diff --git a/projects/plugins/jetpack/_inc/client/components/connection-banner/index.jsx b/projects/plugins/jetpack/_inc/client/components/connection-banner/index.jsx
@@ -28,7 +28,7 @@ export class ConnectionBanner extends React.Component {
 			<Notice
 				title={ title }
 				hideCloseButton
-				actions={ [ <ActionButton { ...connectButtonProps } /> ] }
+				actions={ [ <ActionButton key="connect" { ...connectButtonProps } /> ] }
 			>
 				{ description }
 			</Notice>

diff --git a/projects/plugins/jetpack/changelog/add-eslint-react-jsx-key b/projects/plugins/jetpack/changelog/add-eslint-react-jsx-key
@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Add `key` to various React things. Should be no change to functionality.
+
+
diff --git a/projects/plugins/jetpack/extensions/blocks/donations/deprecated/v1/index.js b/projects/plugins/jetpack/extensions/blocks/donations/deprecated/v1/index.js
@@ -121,15 +121,15 @@ export default {
 							<RichText.Content tagName="p" value={ chooseAmountText } />
 							<div className="donations__amounts donations__one-time-item">
 								{ oneTimeDonation.amounts.map( amount => (
-									<div className="donations__amount" data-amount={ amount }>
+									<div key={ amount } className="donations__amount" data-amount={ amount }>
 										{ formatCurrency( amount, currency ) }
 									</div>
 								) ) }
 							</div>
 							{ monthlyDonation.show && (
 								<div className="donations__amounts donations__monthly-item">
 									{ monthlyDonation.amounts.map( amount => (
-										<div className="donations__amount" data-amount={ amount }>
+										<div key={ amount } className="donations__amount" data-amount={ amount }>
 											{ formatCurrency( amount, currency ) }
 										</div>
 									) ) }
@@ -138,7 +138,7 @@ export default {
 							{ annualDonation.show && (
 								<div className="donations__amounts donations__annual-item">
 									{ annualDonation.amounts.map( amount => (
-										<div className="donations__amount" data-amount={ amount }>
+										<div key={ amount } className="donations__amount" data-amount={ amount }>
 											{ formatCurrency( amount, currency ) }
 										</div>
 									) ) }

diff --git a/projects/plugins/jetpack/extensions/blocks/opentable/deprecated/v1/index.js b/projects/plugins/jetpack/extensions/blocks/opentable/deprecated/v1/index.js
@@ -9,7 +9,10 @@ export default {
 	save: ( { attributes: { rid } } ) => (
 		<>
 			{ rid.map( restaurantId => (
-				<a href={ `https://www.opentable.com/restref/client/?rid=${ restaurantId }` }>
+				<a
+					key={ restaurantId }
+					href={ `https://www.opentable.com/restref/client/?rid=${ restaurantId }` }
+				>
 					{ `https://www.opentable.com/restref/client/?rid=${ restaurantId }` }
 				</a>
 			) ) }

diff --git a/projects/plugins/jetpack/extensions/blocks/opentable/deprecated/v2/index.js b/projects/plugins/jetpack/extensions/blocks/opentable/deprecated/v2/index.js
@@ -21,7 +21,10 @@ export default {
 	save: ( { attributes: { rid } } ) => (
 		<div>
 			{ rid.map( restaurantId => (
-				<a href={ `https://www.opentable.com/restref/client/?rid=${ restaurantId }` }>
+				<a
+					key={ restaurantId }
+					href={ `https://www.opentable.com/restref/client/?rid=${ restaurantId }` }
+				>
 					{ `https://www.opentable.com/restref/client/?rid=${ restaurantId }` }
 				</a>
 			) ) }

diff --git a/projects/plugins/jetpack/extensions/shared/components/block-nudge/index.jsx b/projects/plugins/jetpack/extensions/shared/components/block-nudge/index.jsx
@@ -31,6 +31,7 @@ export default function BlockNudge( {
 				// Use href to determine whether or not to display the Upgrade button.
 				href && [
 					<Button
+						key="nudge"
 						href={ href } // Only for server-side rendering, since onClick doesn't work there.
 						onClick={ handleClick }
 						target="_top"

diff --git a/projects/plugins/protect/changelog/add-eslint-react-jsx-key b/projects/plugins/protect/changelog/add-eslint-react-jsx-key
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Add `key` to some React `actions` props. Should be no change to functionality.
+
+
diff --git a/projects/plugins/protect/src/js/routes/firewall/index.jsx b/projects/plugins/protect/src/js/routes/firewall/index.jsx
@@ -257,6 +257,7 @@ const FirewallPage = () => {
 			children={ <Text>{ __( 'Re-enable the Firewall to continue.', 'jetpack-protect' ) }</Text> }
 			actions={ [
 				<Button
+					key="enable"
 					variant="link"
 					onClick={ toggleWaf }
 					isLoading={ isUpdating }

diff --git a/tools/js-tools/eslintrc/react.js b/tools/js-tools/eslintrc/react.js
@@ -21,8 +21,5 @@ module.exports = {
 		'react/no-did-mount-set-state': 'error',
 		'react/no-did-update-set-state': 'error',
 		'react/prefer-es6-class': 'warn',
-
-		// Temporarily override plugin:@wordpress/react so we can clean up failing stuff in separate PRs.
-		'react/jsx-key': 'off',
 	},
 };