title: React.js - how to create Accordeon (talking to siblings)
body: <p>I just started using react.js and i love the way components work. I created a <code>Card</code> component, which will add a css-class <code>expanded</code> on click. This works like a charm. Now I want all the other cards to loose there <code>expanded</code> property once another card is clicked. In jQuery i'd use <code>siblings</code> to do this.</p>
  
  <p>What is the proper solution with react.js?</p>
  
  <p>Here's my code:</p>
  
  <pre><code>var Card = React.createClass({
  
      getInitialState: function () {
          return {
              expanded: false,
              //clickCount: 0
          };
      },
  
      handleClick: function (event) {
          this.setProps({expanded: !this.props.expanded});
      },
  
      render: function () {
          var cx = React.addons.classSet;
          var classes = cx({
              'card': true,
              'expanded': this.state.expanded
          });
  
          return (
              &lt;li className={classes} onClick={this.handleClick}&gt;
                  &lt;h1&gt;{this.props.name}&lt;/h1&gt;
                  &lt;h2&gt;{this.props.entf.toFixed(2)} km&lt;/h2&gt;
              &lt;/li&gt;
          )
      }
  
  });
  
  
  var App = React.createClass({
  
      handleClick: function (event) {
          console.log("clicked");
      },
  
      render: function () {
  
          var pools = this.props.data.map(function (pool) {
              return (
                  &lt;Card onClick={this.handleClick} name={pool.name} entf={pool.entf} /&gt;
              );
          });
  
          return (&lt;ul&gt;
                  {pools}
          &lt;/ul&gt;
          )
      }
  });
  </code></pre>