Playing with react and fluxxor

GridList.js

var React = require('react');
var Router = require('react-router');
var Fluxxor = require('Fluxxor');
var FluxMixin = Fluxxor.FluxMixin(React);
var StoreWatchMixin = Fluxxor.StoreWatchMixin;
var _ = require('lodash');

var GridListElement = require('./GridListElement');
var flux = require('../flux');

var GridList;
GridList = React.createClass({
  mixins: [FluxMixin, StoreWatchMixin("GridListStore"), Router.State],

  getSelectedElement: function(){
    var element = this.getQuery().element;
    var id = element ? parseInt(element, 10) : null;
    return id ? _.findWhere(this.state.elements, { id: id }) : { };
  },

  getDefaultProps: function(){
    return {
      flux: flux
    }
  },

  getStateFromFlux: function () {
    var state = flux.store("GridListStore").getState();
    return {
      elements: state.elements
    };
  },

  renderItems: function () {
    var selectedElement = this.getSelectedElement();

    return this.state.elements.map(function(element){
      return (<GridListElement key={ element.id } element={ element } selectedElement={ selectedElement }/>)
    })
  },

  render: function () {
    return (
      <ul className='grid-list'>
        { this.renderItems() }
      </ul>
    );
  }
});

module.exports = GridList;

GridListElement.js

var React = require('react');
var GridListElementExpand = require('./GridListElementExpand');
var Router = require('react-router');

var flux = require('../flux');

var GridListElement;
GridListElement = React.createClass({
  mixins: [ Router.Navigation, Router.State ],

  onClick: function(element) {
    if(parseInt(this.getQuery().element, 10) == element.id) {
      this.transitionTo('GridList', null, {  })
    } else {
      this.transitionTo('GridList', null, { element: element.id } )
    }
  },

  getExpand: function() {
    if(this.props.selectedElement.id == this.props.element.id) {
      return (<GridListElementExpand element={ this.props.element }/>)
    }
  },

  render: function () {
    return (
      <li key={this.props.element.id} className="grid-list-element" onClick={this.onClick.bind(this, this.props.element)}>
        <div className="grid-list-element-inner"> List - item { this.props.element.id } </div>
        {  this.getExpand() }
      </li>
    );
  }
});

module.exports = GridListElement;