Fred J. Fred J. - 3 months ago 23
React JSX Question

undefined collection name Meteor with React

This Meteor React client code produces browser console error:


ReferenceError: CarsCol is not defined


Any idea why? Thanks

//cars.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { composeWithTracker } from 'react-komposer';
import { ListItems } from '../containers/myList.jsx';

const composer = (props, onData) => {
const sub = Meteor.subscribe('carsCol');
if (sub.ready()) {
const cars = CarsCol.find().fetch(); //<------- error line
onData(null, {cars});
}
};

const Container = composeWithTracker(composer) (ListItems);
ReactDOM.render(<Container />, document.getElementById('react-root'));


//publications.js

const CarsCol = new Mongo.Collection('carsCol');
Meteor.publish('carsCol', function(){
return CarsCol.find();
});


enter image description here

Answer

You've defined the collection on the server only, you want to define the collection in both places.

What I would do is define your collection in a separate file and import that.

/api/collections/CarsCol

const CarsCol = new Mongo.Collection('carsCol');

Then in cars.jsx

import CarsCol from '../api/collections/CarsCol'