Fix "React keys must be passed directly to JSX without spread"

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 ];
 			},

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,
 						} }
 					/>
 				) ) }

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>

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>