From 4a9e6831761b38ca2590c4eb27a1c03b3ab4b019 Mon Sep 17 00:00:00 2001
From: Brad Jorsch <anomiex@users.noreply.github.com>
Date: Thu, 10 Oct 2024 11:10:25 -0400
Subject: [PATCH] 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.
---
 .../changelog/add-eslint-react-jsx-key         |  5 +++++
 .../button/stories/index.stories.tsx           | 18 +++++++++---------
 .../theme-provider/stories/index.stories.tsx   |  9 +++++++--
 .../changelog/add-eslint-react-jsx-key         |  5 +++++
 .../components/disconnect-survey/index.jsx     |  1 +
 .../changelog/add-eslint-react-jsx-key         |  5 +++++
 .../components/social-previews/instagram.js    |  5 ++++-
 .../changelog/add-eslint-react-jsx-key         |  4 ++++
 .../social-logos/src/react/example.tsx         |  1 +
 .../forms/changelog/add-eslint-react-jsx-key   |  5 +++++
 .../components/jetpack-field-controls.js       |  5 ++++-
 .../components/my-jetpack-screen/index.jsx     |  4 +++-
 .../components/product-detail-table/index.jsx  |  1 +
 .../jetpack-ai/product-page.jsx                |  2 +-
 .../changelog/add-eslint-react-jsx-key         |  5 +++++
 .../search/changelog/add-eslint-react-jsx-key  |  4 ++++
 .../components/search-result-minimal.jsx       |  4 ++--
 .../jetpack/_inc/client/at-a-glance/scan.jsx   |  6 ++++--
 .../components/connection-banner/index.jsx     |  2 +-
 .../jetpack/changelog/add-eslint-react-jsx-key |  5 +++++
 .../blocks/donations/deprecated/v1/index.js    |  6 +++---
 .../blocks/opentable/deprecated/v1/index.js    |  5 ++++-
 .../blocks/opentable/deprecated/v2/index.js    |  5 ++++-
 .../shared/components/block-nudge/index.jsx    |  1 +
 .../protect/changelog/add-eslint-react-jsx-key |  5 +++++
 .../protect/src/js/routes/firewall/index.jsx   |  1 +
 tools/js-tools/eslintrc/react.js               |  3 ---
 27 files changed, 94 insertions(+), 28 deletions(-)
 create mode 100644 projects/js-packages/components/changelog/add-eslint-react-jsx-key
 create mode 100644 projects/js-packages/connection/changelog/add-eslint-react-jsx-key
 create mode 100644 projects/js-packages/publicize-components/changelog/add-eslint-react-jsx-key
 create mode 100644 projects/js-packages/social-logos/changelog/add-eslint-react-jsx-key
 create mode 100644 projects/packages/forms/changelog/add-eslint-react-jsx-key
 create mode 100644 projects/packages/my-jetpack/changelog/add-eslint-react-jsx-key
 create mode 100644 projects/packages/search/changelog/add-eslint-react-jsx-key
 create mode 100644 projects/plugins/jetpack/changelog/add-eslint-react-jsx-key
 create mode 100644 projects/plugins/protect/changelog/add-eslint-react-jsx-key

diff --git a/projects/js-packages/components/changelog/add-eslint-react-jsx-key b/projects/js-packages/components/changelog/add-eslint-react-jsx-key
new file mode 100644
index 0000000000000..6bb34ab09749d
--- /dev/null
+++ 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
index 6b0dffab52719..390b6c1caf71f 100644
--- 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
index c64d593de0f5d..40a8cf5d1f556 100644
--- 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
new file mode 100644
index 0000000000000..4b72c69123c80
--- /dev/null
+++ 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
index be1f25faea11e..61f37210d4f06 100644
--- 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
new file mode 100644
index 0000000000000..82cb4f8f842e5
--- /dev/null
+++ 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
index cfed68ba5b5c2..8af81b876c12e 100644
--- 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
new file mode 100644
index 0000000000000..8825282028aaf
--- /dev/null
+++ 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
index 0b62a2d791db4..b95241d091fb5 100644
--- 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
new file mode 100644
index 0000000000000..ad79ea4996f29
--- /dev/null
+++ 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
index 59482070b4351..d9dcda1926c5c 100644
--- 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
index 9545dfcb90a81..edb46dc369200 100644
--- 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
index aa14b2030b320..900daa4bf8b1b 100644
--- 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/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx b/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx
index c2df6a8b60f4f..00a6b8ee5ab5e 100644
--- a/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx
+++ b/projects/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
new file mode 100644
index 0000000000000..9c48272a94f90
--- /dev/null
+++ 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
new file mode 100644
index 0000000000000..c52e5a775fa9a
--- /dev/null
+++ 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
index 46739b9af523b..1e2a59c45efff 100644
--- 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
index 1ef907170e4d4..6c83008a0ed63 100644
--- 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
index 4db3220126164..8377340f5ac7a 100644
--- 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
new file mode 100644
index 0000000000000..dfae4e2edd8c8
--- /dev/null
+++ 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
index 8ab02b08bd877..1525af2e507ab 100644
--- a/projects/plugins/jetpack/extensions/blocks/donations/deprecated/v1/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/donations/deprecated/v1/index.js
@@ -121,7 +121,7 @@ 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>
 								) ) }
@@ -129,7 +129,7 @@ export default {
 							{ 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
index 129bd2d2d2fa0..04769bbcb9d6a 100644
--- 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
index 711a6d758de36..5ee05582c47b8 100644
--- 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
index a2229f145031c..20bceca99b8a9 100644
--- 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
new file mode 100644
index 0000000000000..9c48272a94f90
--- /dev/null
+++ 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
index 2cef893c72b36..966c72f2c6597 100644
--- 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
index c9a1d55401633..6b9e603c67b06 100644
--- 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',
 	},
 };