Selected ListItem value using SelectableContainerEnhance in Material-UI
<p>I'm really new to <a href="https://facebook.github.io/react/" rel="nofollow">ReactJS</a> and trying to work with <a href="http://www.material-ui.com/" rel="nofollow">Material-UI</a> components on a new <a href="https://www.meteor.com/" rel="nofollow">Meteor</a> app I'm working with. A classic use case has come to my needs: a list of items changes the UI when the user selects or not some ListItem. Surprisingly, I found that React isn't easy with parent-child component relations like that.</p>

<p>I tried to follow the <a href="http://www.material-ui.com/#/components/list" rel="nofollow">Material-UI Docs</a>, implementing <em>SelectableList</em> component like the docs suggests using the <a href="https://github.com/callemall/material-ui/blob/master/src/hoc/selectable-enhance.js" rel="nofollow">SelectableContainerEnhance class</a>. Then I went this way:</p>

<pre><code>const {ListItem, Avatar, Divider} = mui;

App = React.createClass({
  mixins: [ReactMeteorData],

  getMeteorData() {
    return {
      players: Players.find({}, { sort: { score: -1 } }).fetch()
    }
  },

  render() {
    return (
      &lt;SelectableList subheader="Players list"&gt;
        {this.data.players.map((player) =&gt; {
          return (
            React.Children.toArray([
              &lt;Divider /&gt;,

              &lt;ListItem
                value={player._id}
                primaryText={player.name}
                secondaryText={player.score}
                leftAvatar={&lt;Avatar&gt;{player.name}&lt;/Avatar&gt;} /&gt;
            ])
          );
        })}
      &lt;/SelectableList&gt;

      &lt;Divider /&gt;

      { true /* What to do now? */ ?
       (&lt;span&gt;Thanks!&lt;/span&gt;) :
       (&lt;span&gt;Click a player to select&lt;/span&gt;)}
    );
  }
});
</code></pre>

<p>Ok, the list items has become selectable. <em>But how to know if any ListItem is selected? And how to get the value and adjust the UI according to it?</em></p>