Hi,
I have just started learning Meteor and am stuck. I have a mongo collection with some data in it.
meteor:PRIMARY> db.Categories.find(); { "_id" : 1, "name" : "Office Maintenance" } { "_id" : 2, "name" : "Gas" } { "_id" : 3, "name" : "Meals and ent." } { "_id" : 4, "name" : "Hotels" } { "_id" : 5, "name" : "Travel" } { "_id" : 6, "name" : "Office supplies" } meteor:PRIMARY>
Rest of the code is almost copied from Meteor tutorial and then modified just a bit.
imports/api/categories/categories.js
import {Mongo} from 'meteor/mongo'; export const Categories = new Mongo.Collection('Categories');
imports/ui/Components/Categories.jsx
`
import React, {Component, PropTypes} from ‘react’;
export default class Category extends Component {
render() {
alert(“trying to render categories”);
return (
{this.props.category._id} {this.props.category.name}
);
}
}
Category.propTypes = {
category: PropTypes.object.isRequired,
};
`
imports/ui/Components/App.jsx
`
import React, {Component, PropTypes} from ‘react’;
import {createContainer} from ‘meteor/react-meteor-data’;
import ReactDOM from ‘react-dom’;
//importing Mongo collections
import {Categories} from '../../api/categories/categories.js';
//importing the Components
import Category from './Categories.jsx';
class Cbmax extends Component {
renderCategories() {
return this.props.categories.map((category) => (
<Category key={category._id} category={category} />
));
}
render() {
return (
<div className="container">
<header>
<h2> Display Categories </h2>
</header>
{this.renderCategories()}
</div>
);
}
}
Cbmax.propTypes = {
categories: PropTypes.array.isRequired,
};
export default createContainer(() => {
// Return all of your bonus categories
return {
categories: Categories.find({}).fetch(),
};
}, Cbmax);
/*return {
categories: [{"_id" : 1, "name" : "Gas"},
{"_id" : 2, "name" : "Travel"},
{"_id" : 3, "name" : "Office supplies"},
{"_id" : 4, "name" : "Meals and entertainment"},
{"_id" : 5, "name" : "Rent"},
{"_id" : 6, "name" : "Maintenance"},],
};
}, Cbmax);*/`
If I try to use the hardcoded property ‘categories’ of Cbmax (currently commented out in App.jsx), everything works just fine. However, if I try to use the collection, renderCategories() function doesn’t even reach the ‘alert’ statement in the Category component.
Am I missing something here?
Thanks
Sudheer