[markdown] Fix lint errors in client (#45804)

[skip ci]

client/blocks/all-sites/README.md

@@ -7,10 +7,8 @@ This component displays the All Sites item. It's used in the Sidebar as the curr
 ```js
 import AllSites from 'blocks/all-sites';
 
-render() {
-	return (
-		<AllSites sites={ sitesArray } />
-	);
+function render() {
+	return <AllSites sites={ sitesArray } />;
 }
 ```
 

client/blocks/app-promo/README.md

@@ -5,11 +5,9 @@ This component is used to suggest the desktop app to users.
 ## How to use
 
 ```js
-import AppPromo from 'components/app-promo'
+import AppPromo from 'components/app-promo';
 
-render: function() {
-	return (
-		<AppPromo />
-	);
+function render() {
+	return <AppPromo />;
 }
 ```

client/blocks/calendar-button/README.md

@@ -4,13 +4,11 @@ This component is used to display a calendar button. When it pressed, it shows a
 
 ## Usage
 
-```es6
+```jsx
 import CalendarButton from 'blocks/calendar-button';
 
-render() {
-	return (
-		<CalendarButton />
-	);
+function render() {
+	return <CalendarButton />;
 }
 ```
 
@@ -79,41 +77,37 @@ This property defines to this component as a `button`. You shouldn't change this
 
 ### As much simple as possible
 
-```es6
+```jsx
 import CalendarButton from 'blocks/calendar-button';
 
-render() {
+function render() {
 	const tomorrow = new Date( new Date().getTime() + 24 * 60 * 60 * 1000 );
 
-	return (
-		<CalendarButton
-			selectedDay={ tomorrow }
-			onDateChange={ this.setDate } />
-	);
+	return <CalendarButton selectedDay={ tomorrow } onDateChange={ this.setDate } />;
 }
 ```
 
 ### Custom calendar icon
 
-```es6
+```jsx
 import CalendarButton from 'blocks/calendar-button';
 
-render() {
-	return (
-		<CalendarButton icon="thumbs-up" />
-	);
+function render() {
+	return <CalendarButton icon="thumbs-up" />;
 }
 ```
 
 ### Render using children property
 
-```es6
+```jsx
 import CalendarButton from 'blocks/calendar-button';
 
-render() {
+function render() {
 	return (
 		<CalendarButton onDateChange={ this.setDate }>
-			<a class="custom-content" href="#">Open Me!</a>
+			<a class="custom-content" href="https://wordpress.com">
+				Open Me!
+			</a>
 		</CalendarButton>
 	);
 }

client/blocks/calendar-popover/README.md

@@ -6,26 +6,21 @@ Beyond combining Popover and PostSchedule, this component connects with the stat
 
 ## Usage
 
-```es6
+```jsx
 import { Button } from '@automattic/components';
 import CalendarPopover from 'blocks/calendar-popover';
 
-toggle = () => this.setState( { show: ! this.state.show } );
+const toggle = () => this.setState( { show: ! this.state.show } );
+const buttonRef = React.createRef();
 
-render() {
+function render() {
 	return (
 		<div>
-			<Button
-				ref="button"
-				onClick={ this.toggle }
-			>
+			<Button ref={ buttonRef } onClick={ this.toggle }>
 				Show Popover
 			</Button>
 
-			<CalendarPopover
-				context={ this.refs && this.refs.button }
-				isVisible={ this.state.show }
-			/>
+			<CalendarPopover context={ buttonRef } isVisible={ this.state.show } />
 		</div>
 	);
 }

client/blocks/color-scheme-picker/README.md

@@ -10,14 +10,12 @@ When the props `temporarySelection` and `onSelection` are provided, a selection
 ```jsx
 import ColorSchemePicker from 'blocks/color-scheme-picker';
 
-handleColorSchemeSelection = event => {
+handleColorSchemeSelection = ( event ) => {
 	console.log( event.currentTarget.value );
 };
 
-render() {
-	return (
-		<ColorSchemePicker temporarySelection onSelection={ this.handleColorSchemeSelection } />
-	);
+function render() {
+	return <ColorSchemePicker temporarySelection onSelection={ this.handleColorSchemeSelection } />;
 }
 ```
 

client/blocks/comment-button/README.md

@@ -7,10 +7,8 @@ This component is used to display a button with an embedded number indicator.
 ```js
 import CommentButton from 'blocks/comment-button';
 
-render() {
-	return (
-		<CommentButton commentCount={ 123 } />
-	);
+function render() {
+	return <CommentButton commentCount={ 123 } />;
 }
 ```
 

client/blocks/conversation-caterpillar/README.md

@@ -7,10 +7,8 @@ This component is used to show who's involved in a conversation, and how many co
 ```js
 import ConversationCaterpillar from 'blocks/conversation-caterpillar';
 
-render() {
-	return (
-		<ConversationCaterpillar blogId={ blogId } postId={ postId } />
-	);
+function render() {
+	return <ConversationCaterpillar blogId={ blogId } postId={ postId } />;
 }
 ```
 

client/blocks/credit-card-form/README.md

@@ -7,14 +7,15 @@ This component is used to display a credit card form.
 ```js
 import CreditCardForm from 'blocks/credit-card-form';
 
-render() {
+function render() {
 	return (
 		<CreditCardForm
 			createCardToken={ createCardToken }
 			initialValues={ initialValues }
 			recordFormSubmitEvent={ noop }
 			saveStoredCard={ saveStoredCard }
-			successCallback={ noop } />
+			successCallback={ noop }
+		/>
 	);
 }
 ```

client/blocks/dismissible-card/README.md

@@ -8,14 +8,14 @@ via user preference.
 ```js
 import DismissibleCard from 'blocks/dismissible-card';
 
-render: function() {
-  return (
-    <div className="your-stuff">
-      <DismissibleCard preferenceName="my-unique-preference-name">
-        <span>Your stuff in a Card</span>
-      </DismissibleCard>
-    </div>
-  );
+function render() {
+	return (
+		<div className="your-stuff">
+			<DismissibleCard preferenceName="my-unique-preference-name">
+				<span>Your stuff in a Card</span>
+			</DismissibleCard>
+		</div>
+	);
 }
 ```
 

client/blocks/domain-to-plan-nudge/README.md

@@ -6,15 +6,14 @@ and a paid domain.
 ## How to use
 
 ```js
-
 import DomainToPlanNudge from 'blocks/domain-to-plan-nudge';
 
-render: function() {
-  return (
-    <div className="your-stuff">
-      <DomainToPlanNudge />
-    </div>
-  );
+function render() {
+	return (
+		<div className="your-stuff">
+			<DomainToPlanNudge />
+		</div>
+	);
 }
 ```
 

client/blocks/follow-button/README.md

@@ -9,10 +9,10 @@ For most uses, the container is the easiest route.
 ```js
 import FollowButtonContainer from 'blocks/follow-button';
 
-render() {
+function render() {
 	return (
 		<div className="your-stuff">
-			  <FollowButtonContainer siteUrl="http://trailnose.com" />
+			<FollowButtonContainer siteUrl="http://trailnose.com" />
 		</div>
 	);
 }
@@ -27,10 +27,10 @@ render() {
 ```js
 import FollowButton from 'blocks/follow-button/button';
 
-render() {
+function render() {
 	return (
 		<div className="your-stuff">
-			  <FollowButton following={ false } />
+			<FollowButton following={ false } />
 		</div>
 	);
 }

client/blocks/followers-count/README.md

@@ -7,9 +7,7 @@
 ```js
 import FollowersCount from 'blocks/followers-count';
 
-render() {
-	return (
-		<FollowersCount />
-	);
+function render() {
+	return <FollowersCount />;
 }
 ```

client/blocks/global-notice/README.md

@@ -8,7 +8,7 @@ They allow you to use a component for your notice instead of calling the notices
 ```js
 import { InfoNotice } from 'blocks/global-notice';
 
-render() {
+function render() {
 	return (
 		<div>
 			{ this.state.processing && <InfoNotice text={ this.props.translate( 'Proccessing…' ) } /> }

client/blocks/image-editor/README.md

@@ -128,12 +128,7 @@ Already-translated string which will be used on the 'Done' button. If not used,
 ```js
 import ImageEditor from 'blocks/image-editor';
 
-render() {
-	return (
-		<ImageEditor
-			siteId={ siteId }
-			media={ { URL: 'http://example.com/image.jpg' } }
-		/>
-	);
+function render() {
+	return <ImageEditor siteId={ siteId } media={ { URL: 'http://example.com/image.jpg' } } />;
 }
 ```

client/blocks/image-selector/README.md

@@ -12,9 +12,7 @@ Changes to the selection of images will be passed back in various props for sett
 import ImageSelector from 'blocks/image-selector';
 
 export default function MyFeaturedImages() {
-	return (
-		<ImageSelector imageIds={ [ 34, 105 ] } multiple />
-	);
+	return <ImageSelector imageIds={ [ 34, 105 ] } multiple />;
 }
 ```
 
@@ -54,8 +52,8 @@ setImage = ( media ) => {
 	if ( ! media || ! media.items.length ) {
 		return;
 	}
-	const itemIds = media.items.map( item => item.ID );
+	const itemIds = media.items.map( ( item ) => item.ID );
 	this.setState( { imageIds: itemIds } );
-	editProduct( siteId, product, { media.items } );
-}
+	editProduct( siteId, product, media.items );
+};
 ```

client/blocks/like-button/README.md

@@ -9,10 +9,10 @@ For most usage, the container is the easiest route.
 ```js
 import LikeButtonContainer from 'blocks/like-button';
 
-render: function() {
+function render() {
 	return (
 		<div className="your-stuff">
-			  <LikeButtonContainer siteId={ 66775168 } postId={ 643 } />
+			<LikeButtonContainer siteId={ 66775168 } postId={ 643 } />
 		</div>
 	);
 }
@@ -28,15 +28,20 @@ render: function() {
 ```js
 import LikeButton from 'blocks/like-button/button';
 
-render: function() {
+function render() {
 	return (
 		<div className="your-stuff">
-			  <LikeButton likeCount={ 5 } showCount={ true } liked={ false } onLikeToggle={ this.handleLikeToggle } />
+			<LikeButton
+				likeCount={ 5 }
+				showCount
+				liked={ false }
+				onLikeToggle={ this.handleLikeToggle }
+			/>
 		</div>
 	);
-},
+}
 
-handleLikeToggle: function( newState ) {
+function handleLikeToggle( newState ) {
 	// save the state somehow
 }
 ```

client/blocks/location-search/README.md

@@ -13,7 +13,7 @@ class LocationSearchExample extends Component {
 		createNotice: PropTypes.func.isRequired,
 	};
 
-	handlePredictionClick = prediction => {
+	handlePredictionClick = ( prediction ) => {
 		this.props.createNotice(
 			'is-info',
 			`You clicked the '${ prediction.structured_formatting.main_text }' location`