var React = require('react');
var Selectable = require('react-selectable');
 
var App = React.createClass({
  render: function () {
    return (
      <Selectable onSelection={this.handleSelection}>
        {this.props.items.map(function(item, i) {
          return <MyItem key={i}>{item.title}</MyItem>;
        })}
      </Selectable>
    );
  },
  handleSelection: function (keys) {
    console.log('you selected the following keys', keys);
  }
});
 
var MyItem = React.createClass({
  render: function () {
    return (
      <div className={this.props.selected ? 'selected' : ''>
        {this.props.children}
      </div>
    );
  }
});

import React, {Component} from 'react';
import Selectable from 'react-selectable';
 
class App extends Component {
  render() {
    return (
      <Selectable onSelection={this.handleSelection}>
        {this.props.items.map((item, i) => (
          <MyItem key={i}>{item.title}</MyItem>
        ))}
      </Selectable>
    );
  }
  handleSelection(keys) {
    console.log('you selected the following keys', keys);
  }
}
 
class MyItem extends Component {
  render() {
    return (
      <div className={this.props.selected ? 'selected' : ''>
        {this.props.children}
      </div>
    );
  }
}