use HOC for component ID

Author: mikejolley

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

@@ -8,7 +8,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import uniqueID from '../../utils/uniqueid';
+import withComponentID from '../../utils/with-component-id';
 
 /**
  * Component displaying the categories as dropdown or list.
@@ -17,7 +17,6 @@ class ProductCategoriesBlock extends Component {
 	constructor() {
 		super( ...arguments );
 		this.select = createRef();
-		this.id = uniqueID( '', 'wc-block-product-categories' );
 		this.onNavigate = this.onNavigate.bind( this );
 		this.renderList = this.renderList.bind( this );
 		this.renderOptions = this.renderOptions.bind( this );
@@ -71,7 +70,7 @@ class ProductCategoriesBlock extends Component {
 	}
 
 	render() {
-		const { attributes, categories } = this.props;
+		const { attributes, categories, componentID } = this.props;
 		const { className, isDropdown } = attributes;
 		const classes = classnames(
 			'wc-block-product-categories',
@@ -82,7 +81,7 @@ class ProductCategoriesBlock extends Component {
 			}
 		);
 
-		const selectId = `prod-categories-${ this.id }`;
+		const selectId = `prod-categories-${ componentID }`;
 
 		return (
 			<Fragment>
@@ -123,4 +122,4 @@ class ProductCategoriesBlock extends Component {
 	}
 }
 
-export default ProductCategoriesBlock;
+export default withComponentID( ProductCategoriesBlock );

assets/js/utils/uniqueid.js

@@ -0,0 +1,35 @@
+import { Component } from 'react';
+
+const ids = [];
+
+/**
+ * HOC that gives a component a unique ID.
+ *
+ * This is an alternative for withInstanceId from @wordpress/compose to avoid using that dependency on the frontend.
+ */
+const withComponentID = ( OriginalComponent ) => {
+	return class WrappedComponent extends Component {
+		generateUniqueID() {
+			const group = WrappedComponent.name;
+
+			if ( ! ids[ group ] ) {
+				ids[ group ] = 0;
+			}
+
+			ids[ group ]++;
+
+			return ids[ group ];
+		}
+
+		render() {
+			const componentID = this.generateUniqueID();
+
+			return <OriginalComponent
+				{ ...this.props }
+				componentID={ componentID }
+			/>;
+		}
+	};
+};
+
+export default withComponentID;