What does createContainer do in Meteor using React?

Question

I am working on a Meteor tool using React and trying to understand createContainer (). From reading here:

http://guide.meteor.com/v1.3/react.html#using-createContainer

I think its function is defined in meteor/react-meteor-data , which is used to load data. In this particular case, it retrieves data from the Mini Mongo database (here Task ). My question is what does the second createContainer argument do? (here App ). Thanks!

 class App extends Component { //...class definition } export default createContainer(() => { return { //Tasks is a Mongo.Collection //returns the matching rows (documents) //here we define the value for tasks member tasks: Tasks.find({}, { sort: { createdAt: -1} }).fetch(), }; }, App); 

Answer 1

The component created with createContainer is a simple wrapper around your actual component, but it is effective in that it handles Meteor reactivity for you, so you don’t have to think about how to keep everything in the know when your data changes (e.g. , subscription downloads, changes ReactiveVar / Session var)

The React component is basically just a JavaScript function, it is called with many arguments (attributes) and creates an output. React does not know if your data has changed unless you say so. A component created using createContainer will re-render when your reactive data changes and sends a new set of details to your actual component.

Parameters for createContainer is a function that returns the reactive data you need and the component that you want to wrap. It is very simple, and the render function for createContainer is literally one line:

 return <Component {...this.props} {...this.data} />; 

It goes through any details that you pass to the wrapped component, plus it adds a source of reactive information that you configured.

You can see the code here: https://github.com/meteor/react-packages/blob/devel/packages/react-meteor-data/createContainer.jsx

The syntax <Component {...this.props} is known as a sign and basically rotates:

 { prop1: 'some value', prop2: 'another value' } 

in

 <Component prop1='some value' prop2='another value /> 

(See: https://facebook.imtqy.com/react/docs/jsx-spread.html )

Answer 2

Asking a colleague, this is the answer I received:

createContainer second argument is the name of the class into which you want to encapsulate the data. Then it will have “reactive data”, because every time the data in the database changes, the details of the class will change to include new data.

In addition, the createContainer () function should be called outside the class definition.

If anyone has something to add, please feel free to contribute.

Answer 3

createContainer second argument is the name of the class in which you want to pass the details. Let's say createContainer returns a support called firstName Now, whenever there is a new firstName record or an updated firstName in db, then createContainer will call the second argument, which is our class name with the support it supports, i.e. firstName .

Hope this makes sense.