title: Selected ListItem value using SelectableContainerEnhance in Material-UI
body: <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>