Basket test template

Make the 'Selected hotels' box behave like a shopping basket: When a hotel is selected in the search results list, it is added to the basket. When it is unselected, in is removed from the basket.

by TrySpace

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container"></div>

CSS

.title h1 {
    color: green;
}

.basket {
    border: 2px solid red;
    padding: 0.5em;
}

JavaScript 1.7

const hotelResults = [
  {
    hotelName: "Hotel 1",
    location: "Amsterdam",
    stars: 3,
    rooms: 121,
    distance: 0,
  },
  {
    chain: "NH",
    hotelName: "Hotel 2",
    location: "Amsterdam",
    stars: 4,
    rooms: 230,
    distance: 0.5,
  },
  {
    chain: "Radisson",
    hotelName: "Hotel 3",
    location: "Amsterdam",
    stars: 2,
    rooms: 205,
    distance: 0.6,
  },
  {
    hotelName: "Hotel 4",
    location: "Amsterdam",
    stars: 4,
    rooms: 105,
    distance: 1.2,
  },
]

class App extends React.Component{
  constructor(props) {
    super(props);
  }

  render() {
      return (
        <div className="span-24 container">
          <div className="span-24 last title">
              <h1>Select hotels</h1>
              <p>Please select one or more hotels to send requests</p>
          </div>
          <div id="hotel_basket" className="span-6">
            <HotelSelector />
        </div>
    </div>
      )
  }
}

class HotelSelector extends React.Component{
  constructor(props) {
    super(props);
    this.handleSelect = this.handleSelect.bind(this)
    this.doNextStep = this.doNextStep.bind(this)
    this.state = {
      selected: []
    }
  }

  handleSelect (checked, value) {
    const selected = this.state.selected
    let index
    if (checked) {
      selected.push(value)
    } else {
      index = selected.indexOf(value)
      selected.splice(index, 1)
    }
    this.setState({
      selected: selected
    })
  }

  doNextStep () {
    // Do something with this.state.selected
    let selectedHotels = this.state.selected.map((index, key) => {
      return hotelResults[index].hotelName
    })
    alert(selectedHotels)
  }

  render() {
    return (
      <div>
        <div className="basket">
          <h3>Selected hotels</h3>
          <div id="basket_list">
              {
                this.state.selected.length >= 1 ?
                  this.state.selected.map((index, key) => {
                    let hotelName =...