From fef17476c8a5164abb24efd135a0af8b2af52b24 Mon Sep 17 00:00:00 2001
From: Michael Rogowski <rogos.corp@gmail.com>
Date: Mon, 17 Dec 2018 15:15:32 -0500
Subject: [PATCH] Fix undefined error when selecting a product without an image
 (https://github.com/woocommerce/woocommerce-blocks/pull/254)

prior to this commit, an 'individual product' block would produce
an error if associated with a product with no image.
---
 .../assets/js/legacy/views/specific-select.jsx            | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/js/legacy/views/specific-select.jsx b/plugins/woocommerce-blocks/assets/js/legacy/views/specific-select.jsx
index 50463e5221a..23d542fe763 100644
--- a/plugins/woocommerce-blocks/assets/js/legacy/views/specific-select.jsx
+++ b/plugins/woocommerce-blocks/assets/js/legacy/views/specific-select.jsx
@@ -348,13 +348,15 @@ class ProductSpecificSearchResultsDropdownElement extends Component {
 	render() {
 		const product = this.props.product;
 		const icon = this.props.selected ? <Dashicon icon="yes" /> : null;
+		const productImage = product.images.length !== 0 ? 
+			(<img src={ product.images[ 0 ].src } alt={ product.name } />) : null;
 
 		/* eslint-disable jsx-a11y/click-events-have-key-events */
 		/* eslint-disable jsx-a11y/no-static-element-interactions */
 		/* reason: This interface will be deprecated, the new component is accessible. */
 		return (
 			<div className={ 'wc-products-list-card__content' + ( this.props.selected ? ' wc-products-list-card__content--added' : '' ) } onClick={ this.handleClick }>
-				<img src={ product.images[ 0 ].src } alt="" />
+				{ productImage }
 				<span className="wc-products-list-card__content-item-name">{ product.name }</span>
 				{ icon }
 			</div>
@@ -458,11 +460,13 @@ class ProductSpecificSelectedProducts extends Component {
 			}
 
 			const productData = PRODUCT_DATA[ productId ];
+			const productImage = productData.images.length !== 0 ? 
+				(<img src={ productData.images[ 0 ].src } alt={ productData.name } />) : null;
 
 			productElements.push(
 				<li className="wc-products-list-card__item" key={ productData.id + '-specific-select-edit' } >
 					<div className="wc-products-list-card__content">
-						<img src={ productData.images[ 0 ].src } alt="" />
+						{ productImage }
 						<span className="wc-products-list-card__content-item-name">{ productData.name }</span>
 						<button
 							type="button"