React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

class Order extends React.Component {
    constructor(props) {
 
        super(props)
 
        var products = [
            { name: "Motorhead glasses", price: 300, amount: 1 },
            { name: "Judaspriest glasses", price: 499, amount: 1 }
        ]
 
        this.state = { products: products }
        this.handleMinus = this.handleMinus.bind(this)
 
    }
 
 
    handleMinus(key) {
            var stateCopy = Object.assign({}, this.state);
            stateCopy.products[key].amount -= 1;
            this.setState(stateCopy);
    }
    render() {
        return (
            <div className="order">
                {this.state.products.map(function (product, i) {
                    return <div className="order-product" key={i}>
                        <div className="order-product_img"><img src="./assets/img/pic-item.png" alt="" /></div>
                        <h3 className="order-product_name">{product.name}</h3>
                        <div className="order-product_amount">
                            <div className="amount">
                                <button id="minus" onClick={() => {this.handleMinus(i);}}><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                    <g fill="none" fill-rule="evenodd">
                                        <circle cx="12" cy="12" r="11.5" stroke="#333" />
                                        <polygon fill="#000" fill-rule="nonzero" points="6.5 13 17.5 13 17.5 12 6.5 12" />
                                    </g>
                                </svg>
 
                                </button>
                                <p>{product.amount}</p>
                                <button className="plus"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                    <g fill="none" fill-rule="evenodd">
                                        <circle cx="12" cy="12" r="11.5" stroke="#333" />
    ...