title: Meteor 1.3, React, React Router - data not getting passed through
body: <p>I'm trying to get a very basic app going using Meteor 1.3, React and React-Router.  The pages are rendering but am having issues with getting data passed through.  I've done some research but unable to find much with this particular mix including use of the container pattern.</p>
  
  <p>All that the app needs to do is surface all items in the 'Thingies' collection on the Test page.  Unsure if it's the data publication, routing, container or something else that's incorrect?</p>
  
  <p>The debugging console lines all show 0 in the collection even though the mongo shell definitely shows items in there.</p>
  
  <p>Structure of my project: <a href="http://i.stack.imgur.com/WZXFa.png" rel="nofollow">http://i.stack.imgur.com/WZXFa.png</a></p>
  
  <p><strong>things.js</strong></p>
  
  <pre><code>import { Meteor } from 'meteor/meteor';
  import { Mongo } from 'meteor/mongo';
  import { check } from 'meteor/check';
  
  export const Thingies = new Mongo.Collection('thingies');
  
  if (Meteor.isServer) {
    // This code only runs on the server
    Meteor.publish('thingies', function thingiesPublication() {
      return Thingies.find();
    });
  }
  </code></pre>
  
  <p><strong>Test.jsx</strong></p>
  
  <pre><code>import { Meteor } from 'meteor/meteor';
  import { Thingies } from '../../api/things.js';
  import { createContainer } from 'meteor/react-meteor-data';
  import React, { Component } from 'react';
  
  class TestContainer extends Component {
    render(){
  
      console.log('Props: ' + this.props.thingies.length);
  
      let RenderThings = this.props.thingies.map(thing =&gt; {
        return &lt;li key={thing._id}&gt;{thing.text}&lt;/li&gt;
      });
  
      return (
        &lt;div&gt;
          &lt;h1&gt;Test this&lt;/h1&gt;
          &lt;ul&gt;
            { RenderThings }
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  
  TestContainer.propType = {
    thingies: React.PropTypes.array
  };
  
  export default createContainer(() =&gt; {
    Meteor.subscribe('thingies');
  
    console.log('Container: ' + Thingies.find({}).count());
  
    return {
      thingies: Thingies.find({}).fetch(),
    };
  }, TestContainer);
  </code></pre>
  
  <p><strong>routes.jsx</strong></p>
  
  <pre><code>import React from 'react';
  import { Router, Route, IndexRoute, browserHistory } from 'react-router';
  
  // route components
  import App from '../../ui/layouts/App.jsx';
  import TestContainer from '../../ui/pages/Test.jsx';
  import Index from '../../ui/pages/Index.jsx';
  
  export const renderRoutes = () =&gt; (
    &lt;Router history={browserHistory}&gt;
      &lt;Route path="/" component={ App }&gt;
        &lt;IndexRoute component={ Index } /&gt;
        &lt;Route path="index" component={Index}/&gt;
        &lt;Route path="test" component={TestContainer}/&gt;
      &lt;/Route&gt;
    &lt;/Router&gt;
  );
  </code></pre>
  
  <p><strong>Navigation.jsx</strong></p>
  
  <pre><code>import React from 'react';
  import { IndexLink, Link } from 'react-router';
  
  export const Navigation = () =&gt; (
  &lt;div&gt;
  &lt;h4&gt;Navigation&lt;/h4&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;IndexLink to="/" activeClassName="active"&gt;Home&lt;/IndexLink&gt;&lt;/li&gt;
      &lt;li&gt;&lt;Link to="index" activeClassName="active"&gt;Index&lt;/Link&gt;&lt;/li&gt;
      &lt;li&gt;&lt;Link to="test" activeClassName="active"&gt;Test&lt;/Link&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/div&gt;
  )
  </code></pre>
  
  <p><strong>App.jsx</strong></p>
  
  <pre><code>import React, { Component }  from 'react';
  import { Navigation } from '../components/Navigation.jsx';
  
  const App = ( { children } ) =&gt; (
    &lt;div&gt;
      &lt;Navigation /&gt;
      { children }
    &lt;/div&gt;
  )
  
  export default App;
  </code></pre>
  
  <p>Many thanks in advance.  I'm sure I'm missing something obvious!  </p>