ReactJS Lists

PlacesContainer.js

{this.state.places.map(function(place) {
            return <PlacesListComponent key={place.id} place={place}/>;
          })}

PlacesListComponent.js

import React from 'react';
import {Link} from 'react-router';


export default class PlacesListComponent extends React.Component {
  render() {
    return (
      <div className="row">
        <br/>
        <div className="col-md-7">
          <img className="img-responsive" src="http://placehold.it/700x300" alt=""/>
        </div>
        <div className="col-md-5">
          <h3>{this.props.place.title}</h3>
          <h4>{this.props.place.city}</h4>
          <p>{parseInt(this.props.place.distance, 10)}km</p>

        <Link className="btn btn-primary" to={`/place/${this.props.place.id}`}>View {this.props.place.title}</Link>
            <span className="glyphicon glyphicon-chevron-right"></span>
        </div>
      </div>
    );
  }
}