var MyApp = React.createClass({  
  getInitialState: function() {
    return { activeIndex: 0 } 
  },
	clicked: function(index) {
    this.setState({ activeIndex: index });
  }, 
  renderCity: function(city, index) {
    var cls = (index === this.state.activeIndex) ? "cityButton active" : "cityButton";
    return <li key={city.name} className={cls} onClick={this.clicked.bind(this, index)}>
              <a>{city.name}</a>
      			</li>  
  },
  render: function() {    
  	return <div>
  		<h2>Pick a city to see its picture</h2>
  		<ul>
        {_.map(this.props.cities, this.renderCity)}
  		</ul>
      <img src={this.props.cities[this.state.activeIndex].img} alt="City image" />
  	</div>    
  }
});

var cities = [
  { name: 'Paris', img: 'http://cache.graphicslib.viator.com/graphicslib/thumbs674x446/2050/SITours/eiffel-tower-paris-moulin-rouge-show-and-seine-river-cruise-in-paris-150305.jpg' },
  { name: 'London', img: "https://i.telegraph.co.uk/multimedia/archive/02423/london_2423609k.jpg"},
  { name: 'Berlin', img: 'http://www.jobs-berlin.org/wp-content/uploads/2013/04/Fotolia_45852498_S.jpg'}
];

React.render(<MyApp cities={cities} />, document.getElementById('container'));