title: React.js: Composing components to create tabs
body: <p>I’m trying to make a tabs component. TabsSwitcher and TabsPanel must be separate components so they could be used anywhere in DOM, e.g. TabsSwitcher doesn’t have to be followed by TabsPanel.</p>
  
  <p>To make it work, I need to somehow connect these components. Furthermore, TabsSwitcher must be able to tell TabsPanel when a tab was clicked.</p>
  
  <pre><code>/** @jsx React.DOM */
  
  var TabsExample = React.createClass({
      render: function() {
          var tabs = [
              {title: 'first', content: 'Content 1'},
              {title: 'second', content: 'Content 2'}
          ];
          return &lt;div&gt;
              &lt;TabsSwitcher items={tabs}/&gt;
              &lt;TabsContent items={tabs}/&gt;
          &lt;/div&gt;;
      }
  });
  
  var TabsSwitcher = React.createClass({
      render: function() {
          var items = this.props.items.map(function(item) {
              return &lt;a onClick={this.onClick}&gt;{item.title}&lt;/a&gt;;
          }.bind(this));
          return &lt;div&gt;{items}&lt;/div&gt;;
      },
      onClick: function(e) {
          // notify TabsContent about the click
      }
  });
  
  var TabsContent = React.createClass({
      render: function() {
          var items = this.props.items.map(function(item) {
              return &lt;div&gt;{item.content}&lt;/div&gt;;
          });
          return &lt;div&gt;{items}&lt;/div&gt;;
      }
  });
  
  React.renderComponent(
      &lt;TabsExample/&gt;,
      document.body
  );
  </code></pre>
  
  <p>What’s the best way to do it?</p>
  
  <hr>
  
  <p>Solution: <a href="http://jsfiddle.net/NV/5YRG9/">http://jsfiddle.net/NV/5YRG9/</a></p>