Meteor does not display collection that exists in db

Question

A Meteor/React noob here, going through the Meteor-React tutorial and got stuck on step 3. My problem is that the data is not being displayed in the browser, although it exists in the db.

Here is my imports/ui/App.jsx:

import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';

import { Tasks } from '../api/tasks.js';

import Task from './Task.jsx';

class App extends Component {
  renderTasks() {
    return this.props.tasks.map((task) => (
      <Task key={task._id} task={task} />
    ));
  }

  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo List</h1>
        </header>

        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
}

App.propTypes = {
  tasks: PropTypes.array.isRequired,
};

export default createContainer(() => {
  return {
    tasks: Tasks.find({}).fetch(),
  };
}, App);

No errors show up in console.

Basically this.props.tasks returns empty array. But db.tasks.find({}) in console shows records. Without changing much around, if I hardcode Tasks records, they display alright, so the issue isn't with Task component. Anyone can help here? Would much appreciate.

client/main.jsx:

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';

import App from '../imports/ui/App.jsx';

Meteor.startup(() => {
  render(<App />, document.getElementById('render-target'));
});

package.json:

{
  "name": "simple-todos",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "meteor-node-stubs": "~0.2.0",
    "react": "^15.1.0",
    "react-addons-pure-render-mixin": "^15.1.0",
    "react-dom": "^15.1.0"
  }
}

npm version 3.3.12 node version 5.6.0

Answer 1

As of your description from, it seems that your database is not accessible on both server & client. May be you forgot to add the reference of your database in the server side. try to import your tasks main.js file of your server.

Make sure your server/main.js has the following line:

import '../imports/api/tasks.js';