Integrating React with Meteor's reactive data system

In the preceding example, the data passed to the child component via props was generated in the parent component itself in the setInterval function. In order to render React components on Meteor's data change, we need to create a component container.

The steps are as follows:

1. Add react-meteor-data and react-addons-pure-render-mixin npm packages using the following command:

        >> npm install react-meteor-data --save
        >> npm install react-addons-pure-render-mixin --save

1. Import createContainer into the Timer.js component:

        import React from 'react';
        import TimerDisplay from './TimerDisplay';
        import { createContainer } from 'react-meteor-data';

1. Export the container function instead of the component:

        export default createContainer(() => {
        return {
           time: Time.find().fetch()
          };
        }, 
       Timer);

The first parameter is a callback function that returns the result as an object named time, and the second parameter is the Timer component. The way it works is that on any changes in the browser database Minimongo, the data will be fetched and passed to the component as props (time in our case).

To break this down, refer to this:

1. We defined Time as a MongoDB collection.
2. find() is a MongoDB method to query records (records are called documents in MongoDB) from the collection. If there is no query specified, will return cursor for the first 20 records by default.
3. Adding the fetch() method will return the documents as an array.

Meteor allows us to create a collection directly in the code:

Time = new Mongo.Collection('time');