Meteor-React tutorial, can't see Mongo data in the web-browser

I'm trying to learn Meteor by meteor.com/tutorials/, I've completed blaze version - everything worked perfectly, and now when I tried React version (meteor.com/tutorials/react/collections). I had some issues with importing the collection.

After step 3.4 I do:

db.tasks.insert({ text: "Hello world!", createdAt: new Date() });

And then run meteor(sudo meteor run), application starts normally but in the web browser I can't see any data. Only background styles.

EDIT 1:

/imports/api/tasks.js

import { Mongo } from 'meteor/mongo';
export const Tasks = new Mongo.Collection('tasks');

/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';

// App component - represents the whole app
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);

/server/main.js

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

( Here is GitHub repository with all modified files: https://github.com/brozermanik/meteor-rect-tutorial )

EDIT2: In the Mongo shell I've tried:

show dbs

And:

show collections

And it showed tasks db and its elements.

So either Meteor can't fetch data from Mngo or there's something wrong with the rendering component.

Sorry, if this is too newbie question but I've been stuck for 3 days already.

Upvotes: 1

Views: 630

Answers (1)

Jean Grimbert
Jean Grimbert

Reputation: 51

In server/main.js, you should put

import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';

Meteor.startup(() => {
  // code to run on server at startup
  Tasks = new Mongo.Collection('tasks');
});

I think the issue is that you'd put it in client/main.js !

Upvotes: 0

Related Questions