I am trying to follow up meteor’s guide to create a simple to-do app as mentioned here Create simple to-do using ReactJS but I am stuck at Collections
I am able to successfully save a collection in MongoDB but the same is not retrieved in front end. What am I doing wrong? Here is my
server/main.js
import '../imports/api/tasks.js';
client/main.js
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'));
});
imports/ui/App.jsx
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);
And finally
imports/api/tasks.js
import { Mongo } from 'meteor/mongo';
export const Tasks = new Mongo.Collection('tasks');