Create renderFrontend utils function

assets/js/blocks/product-categories/frontend.js

@@ -1,34 +1,22 @@
-/**
- * External dependencies
- */
-import { render } from 'react-dom';
-
 /**
  * Internal dependencies
  */
 import Block from './block.js';
 import getCategories from './get-categories';
+import renderFrontend from '../../utils/render-frontend.js';
 
-const containers = document.querySelectorAll(
-	'.wp-block-woocommerce-product-categories'
-);
-
-if ( containers.length ) {
-	Array.prototype.forEach.call( containers, ( el ) => {
-		const data = JSON.parse( JSON.stringify( el.dataset ) );
-		const attributes = {
-			hasCount: data.hasCount === 'true',
-			hasEmpty: data.hasEmpty === 'true',
-			isDropdown: data.isDropdown === 'true',
-			isHierarchical: data.isHierarchical === 'true',
-		};
-		const categories = getCategories( attributes );
+const getProps = ( el ) => {
+	const attributes = {
+		hasCount: el.dataset.hasCount === 'true',
+		hasEmpty: el.dataset.hasEmpty === 'true',
+		isDropdown: el.dataset.isDropdown === 'true',
+		isHierarchical: el.dataset.isHierarchical === 'true',
+	};
 
-		el.classList.remove( 'is-loading' );
+	return {
+		attributes,
+		categories: getCategories( attributes ),
+	};
+};
 
-		render(
-			<Block attributes={ attributes } categories={ categories } />,
-			el
-		);
-	} );
-}
+renderFrontend( '.wp-block-woocommerce-product-categories', Block, getProps );

assets/js/blocks/reviews/frontend.js

@@ -1,32 +1,26 @@
-/**
- * External dependencies
- */
-import { render } from 'react-dom';
-
 /**
  * Internal dependencies
  */
 import FrontendContainerBlock from './frontend-container-block.js';
+import renderFrontend from '../../utils/render-frontend.js';
 
-const containers = document.querySelectorAll( `
+const selector = `
 	.wp-block-woocommerce-all-reviews,
 	.wp-block-woocommerce-reviews-by-product,
 	.wp-block-woocommerce-reviews-by-category
-` );
+`;
 
-if ( containers.length ) {
-	// Use Array.forEach for IE11 compatibility
-	Array.prototype.forEach.call( containers, ( el ) => {
-		const attributes = {
-			...el.dataset,
+const getProps = ( el ) => {
+	return {
+		attributes: {
 			showReviewDate: el.classList.contains( 'has-date' ),
 			showReviewerName: el.classList.contains( 'has-name' ),
 			showReviewImage: el.classList.contains( 'has-image' ),
 			showReviewRating: el.classList.contains( 'has-rating' ),
 			showReviewContent: el.classList.contains( 'has-content' ),
 			showProductName: el.classList.contains( 'has-product-name' ),
-		};
+		},
+	};
+};
 
-		render( <FrontendContainerBlock attributes={ attributes } />, el );
-	} );
-}
+renderFrontend( selector, FrontendContainerBlock, getProps );

assets/js/utils/render-frontend.js

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { render } from 'react-dom';
+
+/**
+ * Renders a block component in the place of a specified set of selectors.
+ *
+ * @param {string}   selector   CSS selector to match the elements to replace.
+ * @param {function} Block      React block to use as a replacement.
+ * @param {function} [getProps] Function to generate the props object for the
+ * block.
+ */
+export default ( selector, Block, getProps = () => {} ) => {
+	const containers = document.querySelectorAll( selector );
+
+	if ( containers.length ) {
+		// Use Array.forEach for IE11 compatibility
+		Array.prototype.forEach.call( containers, ( el ) => {
+			const props = getProps( el );
+			const attributes = {
+				...el.dataset,
+				...props.attributes,
+			};
+
+			el.classList.remove( 'is-loading' );
+
+			render( <Block { ...props } attributes={ attributes } />, el );
+		} );
+	}
+};