React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>


<!--

Imagine that we already have a JSON API (see below data) and a mock from our designer.

The mock looks like this:
https://i.imgur.com/htRHbvG.png

Create a product listing component in ReactJS using the data below. 
Please talk about your thought process when building the component.

{
	"statusCode": "0",
	"statusMessage": "The API View Merchandised Content was executed successfully",
	"metadescription": "Fruit",
	"skus": [{
		"productURL": "https://groceries.asda.com:443/api/items/view?itemid=910000374507",
		"id": "910000374507",
		"extraLargeImageURL": "https://ui1.assets-asda.com:443/g/v5/981/313/5051413981313_280_IDShot_3.jpeg",
		"name": "ASDA Grower's Selection Satsumas",
		"price": "£1.00",
		"imageURL": "https://ui2.assets-asda.com:443/g/v5/981/313/5051413981313_130_IDShot_4.jpeg"
	}, {
		"productURL": "https://groceries.asda.com:443/api/items/view?itemid=1121465",
		"id": "1121465",
		"extraLargeImageURL": "https://ui1.assets-asda.com:443/g/v5/677/308/5051413677308_280_IDShot_3.jpeg",
		"name": "ASDA Grower's Selection Ripen at Home Kiwi Fruit",
		"price": "£0.75",
		"imageURL": "https://ui2.assets-asda.com:443/g/v5/677/308/5051413677308_130_IDShot_4.jpeg"
	}, {
		"productURL": "https://groceries.asda.com:443/api/items/view?itemid=910000911005",
		"id": "910000911005",
		"extraLargeImageURL": "https://ui3.assets-asda.com:443/g/v5/013/823/5054070013823_280_IDShot_3.jpeg",
		"name": "ASDA Chosen by Kids Pears",
		"price": "£1.00",
		"imageURL": "https://ui2.assets-asda.com:443/g/v5/013/823/5054070013823_130_IDShot_4.jpeg"
	}, {
		"productURL": "https://groceries.asda.com:443/api/items/view?itemid=910001181511",
		"id": "910001181511",
		"extraLargeImageURL":...

CSS

.product-list__item {
  padding: 5px;
  border: 1px grey;
  border-style: solid none solid solid;
  list-style: none;
  display:inline-block;
  width:20%;
  text-align: center;
}

.product-list__item:last-child {
  border-style: solid;
}

.product-list {
  display: flex;
  justify-content: center;
}

.btn {
  position: relative;
  bottom: 20px;
}

.btn--green {
  border-color: #3D9970;
  color: white;
  background-color: #3D9970;
}

.product-list__name {
  height: 15%;
}

.product-list__price {
   height: 15%;
}

Babel + JSX

class ProductItem extends React.Component {
  render() {
    const product = this.props.product;

    return (
      <li className='product-list__item'>
        <ProductItemImage url={product.imageURL} />
        <p className='product-list__name'>{product.name}</p>
        <p className='product-list__price'>{product.price}</p>
        <AddToCart url={product.productURL}>Add</AddToCart>
      </li>
    );
  }
}

class ProductItemImage extends React.Component {
  render() {
    return (
      <img src={this.props.url} alt="image not available"/>
    );
  }
}


class AddToCart extends React.Component {

  render() {
    return (
      <button className='btn btn--green' onClick={()=>location.href = this.props.url}>Add</button>
    );
  }
}

class ProductList extends React.Component {
  render() {

    const rows = [];
    this.props.products.forEach((product) => {
      rows.push(
        <ProductItem
          product={product}
          key={product.id}
        />
      );
    });

    return (
        <ul className='product-list'>{rows}</ul>
    );
  }
}

const PRODUCTS = [{
		"productURL": "https://groceries.asda.com:443/api/items/view?itemid=910000374507",
		"id": "910000374507",
		"extraLargeImageURL": "https://ui1.assets-asda.com:443/g/v5/981/313/5051413981313_280_IDShot_3.jpeg",
		"name": "ASDA Grower's Selection Satsumas",
		"price": "£1.00",
		"imageURL": "https://ui2.assets-asda.com:443/g/v5/981/313/5051413981313_130_IDShot_4.jpeg"
	}, {
		"productURL": "https://groceries.asda.com:443/api/items/view?itemid=1121465",
		"id": "1121465",
		"extraLargeImageURL": "https://ui1.assets-asda.com:443/g/v5/677/308/5051413677308_280_IDShot_3.jpeg",
		"name": "ASDA Grower's Selection Ripen at Home Kiwi Fruit",
		"price": "£0.75",
		"imageURL": "https://ui2.assets-asda.com:443/g/v5/677/308/5051413677308_130_IDShot_4.jpeg"
	}, {
		"productURL": "https://groceries.asda.com:443/api/items/view?itemid=910000911005",
		"id": "910000911005",
		"extraLargeImageURL":...