reactjs - Meteor Export collection to React component -

this meteor code fails display data mongo collection carscol in browser.
doing wrong? thanks

// /imports/api/collections.js export const carscol = new mongo.collection('carscol');   // /imports/ui/mylist.jsx import react 'react';  export const listitems = ({listitems}) => {    //<---- {listitems} undefined   if (listitems && listitems.length > 0) {     return (       <ol>         {listitems.map((item) => (           <li key={item._id}>{item.car}</li>         ))}       </ol>     );   } else {     return (       <p>no cars yet!</p>   //<------------ shows in browser     );   } };   // /client/cars.js import react 'react'; import reactdom 'react-dom'; import { composewithtracker } 'react-komposer'; import { listitems } '../imports/ui/mylist.jsx'; import { carscol } '../imports/api/collections.js';  const composer = (props, ondata) => {   const sub = meteor.subscribe('carscol');   if (sub.ready()) {     const cars = carscol.find().fetch();     ondata(null, {cars});   } };  const container = composewithtracker(composer) (listitems); reactdom.render(<container />, document.getelementbyid('react-root')); 

very familiar problem. try pass reference collection instead of fetched data via props component, this:

// /imports/api/collections.js export const carscol = new mongo.collection('carscol');   // /imports/ui/mylist.jsx import react 'react';  export const listitems = ({cars}) => {   const listitems = cars.find().fetch(); // <- fetching data collection received prop right here    if (listitems && listitems.length > 0) {     return (       <ol>         {listitems.map((item) => (           <li key={item._id}>{item.car}</li>         ))}       </ol>     );   } else {     return (       <p>no cars yet!</p>   //<------------ shows in browser     );   } };   // /client/cars.js import react 'react'; import reactdom 'react-dom'; import { composewithtracker } 'react-komposer'; import { listitems } '../imports/ui/mylist.jsx'; import { carscol } '../imports/api/collections.js';  const composer = (props, ondata) => {   const sub = meteor.subscribe('carscol');   if (sub.ready()) {     ondata(null, {       cars: carscol // <- "cars" prop collection     });   } };  const container = composewithtracker(composer) (listitems); reactdom.render(<container />, document.getelementbyid('react-root')); 

i believe should work, although i'm having strong feeling didn't share 100% of code involved. idea clear: when subscription ready, pass collection itself, not data fetched it, via props, , perform fetching within component itself. way, you'll preserve reactivity, e.g. when collection updated, component updated (rendered).