React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by Fabio Dan

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"></div>

CSS

body{
  color: black;
  background-color: black;
}
#container {
  background-color: white;
  padding: .02vh .02vw;
 }
 
 div{
  border: 1px solid #333;
}
/*
#container > .kiosk{
  display: grid;
  grid-columns: repeat( 3, 1fr );
}
*/
.green{
  background-color: #88C342;
}
.blue {
  background-color: #2242C3;
}

Babel + JSX

const Kiosk = ({ skus }) => <div className='kiosk'> 
    { skus.map( product => <Product key={ product.id } { ...product } /> )}
  </div>;
  
class Product extends React.Component{
	constructor( props ){
  	super( props );
    this.state = {
    	qty: 0
    }
  }
	onAdd(){
		this.setState({
    	qty: this.state.qty + 1
		});
	}
  
  render(){
  	const { imageURL, name, price } = this.props;
    return <div aria-describedby='plabel'>
      <img src={ imageURL } alt={ name } />
      <div id='plabel'>{ name }</div>
      <div aria-label='price'>{ price }</div>
      <div>
        <input type='button' defaultValue='add' 
        className={ this.state.qty % 2 === 0 ? 'green' : 'blue' }
        
        role='button' aria-label='add button' onClick={ ::this.onAdd }/>
      </div>
    </div>;
  }
}

const data = {
	"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":...