title: React DropdownList - stateful or stateless children?
body: <p>According to React's documentation: </p>
  
  <blockquote>
    <p>A common pattern is to create several stateless components that just
    render data, and have a stateful component above them in the hierarchy
    that passes its state to its children via props.</p>
  </blockquote>
  
  <p>Let's take for example a DropdownList and break it into smaller pieces:
  <img src="https://i.stack.imgur.com/flfoX.jpg" alt="DropdownList"></p>
  
  <p>Applying React's ideology on the DropdownList would imply that the DropdownList component manages the state for both the Popup and the List by responding also to UI events. A very good implementation in this way can be found here <a href="http://jquense.github.io/react-widgets/docs/#/dropdown-list" rel="nofollow noreferrer">http://jquense.github.io/react-widgets/docs/#/dropdown-list</a> (see the GitHub code).</p>
  
  <p>Another approach could be for each component to manage its own state, where possible. I tried to write a minimalist version of my own DropdownList (please mind the CSS..) that uses a stateful List. A short example on how the List manages its state:</p>
  
  <pre><code>_onMouseDown: function (index, event) {
  
      if(!this.state.data[index].disabled) {
          this.setState({
              selectedIndex: index,
              focusedIndex: index
          });
  
          this.props.onSelectedIndexChange(event, index);
      } else {
          event.preventDefault();
      }
  }
  </code></pre>
  
  <p>Here's the full jsfiddle: <a href="http://jsfiddle.net/5d30pctd/" rel="nofollow noreferrer">http://jsfiddle.net/5d30pctd/</a></p>
  
  <p>I won't compare these two approaches, since both have weak and strong points, but rather ask you how it would be easier for consumers to re-use: a stateful or a stateless List?</p>