styles.css

html {
  box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/*
 * Remove default margin and set default font family to sans-serif.
 */
body {
  margin: 0;
  font-family: 'Tahoma', sans-serif;
}

/*
 * Strip margin and padding from core elements
 * (brings them to the same predictable blank slate of a div)
 */
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figure,
dl,
ol,
ul {
  margin: 0;
  padding: 0;
}

/*
 * Address style set to `bolder` in Firefox, Safari, and Chrome.
 */
strong {
  font-weight: bold;
}

/*
 * Remove inner padding and border in Firefox
 */
::-moz-focus-inner {
  padding: 0;
  border: 0;
}

/*
 * 1. Address `overflow` set to `hidden` in IE 10/11.
 * 2. Improve consistency of cursor style
 */
button {
    overflow: visible;
    cursor: pointer;
}

/*
 * 1. For responsive web development, makes sure images respect the bounds
 *    of a fluid container.
 * 2. The image's aspect ratio is preserved even if it has an inline height set.
 * 3. Fixes images within links gaining a border in IE 10.
 */
img {
  max-width: 100%;
  height: auto;
  border: 0;
}
/*
 * Makes sure images respect the bounds of a fluid container.
 */
svg {
  max-height: 100%;
}

#root {
  height: 100%;
}

.toggable{
  width: 400px;
  height: 100%;
  border: solid 1px #ddd;
  margin: 10px;
}

.toggable header{
  width: 100%;
  padding: 10px;

  background-color: #ddd;
}

TacoApp.js

import React, { Component } from 'react'
import {render} from 'react-dom'
import Toggable from './Toggable'

class App extends Component {
  constructor() {
    super()
    this.state = {
      amountOfItems: 0,
      totalPrice: 0
    }
  }

  buy(price){
    let nextState = this.state
    nextState.amountOfItems ++
    nextState.totalPrice += price
    this.setState(nextState)
  }

  render(){
    return (
      <div>

        <h1>You ordered {this.state.amountOfItems} tacos</h1>
        <h2>Your total is R$ {this.state.totalPrice.toFixed(2)}</h2>
        {
          this.props.tacos.map(taco => <Toggable name={taco.name}
                                                 url={taco.url}
                                                 price={taco.price}
                                                 onBuy={this.buy.bind(this)} />)
        }
      </div>
    );
  }
}


let tacos = [
  {
    name: 'Carnitas',
    url:'https://farm6.staticflickr.com/5301/5668162498_3acfecea39_z.jpg',
    price: 100
  },

  {
    name: 'Fish',
    url:'http://blog.sandiego.org/wp-content/uploads/2010/07/rubios_fish_taco.jpg',
    price: 120
  }
]



render(<App tacos={tacos} />, document.getElementById('root'));

Toggable.js

import React, { Component } from 'react';

class Toggable extends Component {
  constructor() {
    super();

    this.state = {
      isOpened: true
    }
  }

  toggle(){
    this.setState({isOpened: !this.state.isOpened})
  }

  onBuyClick(){
    this.props.onBuy(this.props.price)
  }

  render(){
    return (
      <div className="toggable">
        <header onClick={this.toggle.bind(this)}>{this.props.name}</header>

        {this.state.isOpened?
          <div>
            <img src={this.props.url} />
            R$ {this.props.price.toFixed(2)}
            <button onClick={this.onBuyClick.bind(this)}>Buy</button>
          </div>
        : ''}

      </div>
    )
  }
}

export default Toggable