Fix "React keys must be passed directly to JSX without using spread" (#…

…92075) * Fix "React keys must be passed directly to JSX without spread" * Add "react/jsx-key" rule as a warning for now
Automattic · Jun 25, 2024 · 3219e70 · 3219e70
1 parent 4742267
commit 3219e70
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 4 deletions.
diff --git a/apps/notifications/src/panel/templates/note-list.jsx b/apps/notifications/src/panel/templates/note-list.jsx
@@ -288,7 +288,7 @@ export class NoteList extends Component {
 		let [ notes ] = Object.entries( noteGroups ).reduce(
 			( [ list, isFirst ], [ timeGroupKey, timeGroupNotes ] ) => {
 				const title = groupTitles[ timeGroupKey ];
-				const header = <ListHeader { ...{ key: title, title, isFirst } } />;
+				const header = <ListHeader key={ title } title={ title } isFirst={ isFirst } />;
 
 				return [ [ ...list, header, ...timeGroupNotes.map( createNoteComponent ) ], false ];
 			},

diff --git a/client/blocks/post-share/connections-list.jsx b/client/blocks/post-share/connections-list.jsx
@@ -38,11 +38,11 @@ class ConnectionsList extends PureComponent {
 			<div className="post-share__connections">
 				{ connections.map( ( connection ) => (
 					<Connection
+						key={ connection.keyring_connection_ID }
 						{ ...{
 							connection,
 							onToggle,
 							isActive: connection.isActive,
-							key: connection.keyring_connection_ID,
 						} }
 					/>
 				) ) }

diff --git a/client/blocks/sharing-preview-pane/index.jsx b/client/blocks/sharing-preview-pane/index.jsx
@@ -189,7 +189,7 @@ class SharingPreviewPane extends PureComponent {
 					</div>
 					<VerticalMenu onClick={ this.selectPreview } initialItemIndex={ initialMenuItemIndex }>
 						{ services.map( ( service ) => (
-							<SocialItem { ...{ key: service, service } } />
+							<SocialItem key={ service } service={ service } />
 						) ) }
 					</VerticalMenu>
 				</div>

diff --git a/client/components/seo-preview-pane/index.jsx b/client/components/seo-preview-pane/index.jsx
@@ -222,7 +222,7 @@ export class SeoPreviewPane extends PureComponent {
 					</div>
 					<VerticalMenu onClick={ this.selectPreview }>
 						{ services.map( ( service ) => (
-							<SocialItem { ...{ key: service, service } } />
+							<SocialItem key={ service } service={ service } />
 						) ) }
 					</VerticalMenu>
 				</div>

diff --git a/packages/eslint-plugin-wpcalypso/lib/configs/react.js b/packages/eslint-plugin-wpcalypso/lib/configs/react.js
@@ -10,6 +10,7 @@ module.exports = {
 	plugins: [ 'react', 'react-hooks' ],
 	rules: {
 		'react/jsx-curly-spacing': [ 2, 'always' ],
+		'react/jsx-key': 1,
 		'react/jsx-no-duplicate-props': 2,
 		'react/jsx-no-target-blank': 2,
 		'react/jsx-no-undef': 2,