How to load data with Meteor and React?

Question

I'm using Meteor 1.3.5 and React 15.1.0 and trying to understand the right way to load and subscribe to data from MongoDB.

Right now I'm doing this in createContainer with params, and having problems waiting for the data to be available.

Should I use states instead of props, and load the data in componentWillMount or componentWillMount? These didn't worked for me so far. I also tried to work with getMeteorData, but it isn't doing anything when the component renders.

I'm looking for a solution that will update the component when new data is coming. Thanks

import React, {Component, PropTypes} from "react";
import ReactDOM from "react-dom";
import { createContainer } from "meteor/react-meteor-data";


export default class UsersComponent extends Component{

  render(){
    let users = this.props.users;
    console.log(users);

    return (
      <div>
        {
          (users)?
            (users.map((user, i) => (
              <div key={user._id}>
                <p>{user.name}</p>
              </div>
            )))
          : null
        }
      </div>
    )
  }
}


UsersComponent.propTypes = {
  users: PropTypes.array.isRequired,
}

export default createContainer(({ params }) => {

  return {
    users: Meteor.users.find().fetch(),
  };
}, UsersComponent);

Answer 1

Avoid using React's state to manage data with Meteor. Instead, create stateless functional components that uses only props. Read these:

• Functional Components vs. Stateless Functional Components vs. Stateless Components

• Stateless Functional Components in React 0.14

This makes your UI component easily reusable, regardless of how you want to laod data.

To understand how to load (reactive) data, it is useful to understand the concept/difference between presentational and container components.

Next step is to create container components using a technique of your choice that wraps/renders a UI component. Meteor guide's createContainer is the de facto approach for now. There are also other options such as Mantra (some say better but more complex).