Meteor-React-Ionic Mobile App Part 2: Passing in Data

3 min readJul 30, 2015

In Part 1, we built a basic template with three routes. You can find the related article here, or if you just want to clone the repo and move forward, you can find the repo here. This should only take 5 minutes if you already have the basic template.

Your app should eventually look like the demo to the left.

NOTE: Be aware that if you clone the repo, there are a few quirks with the meteoric:ionic-sass package that will crash the app the first time you run it. All you have to do to solve this is kill the process and re-run Meteor.

Meteor passes data to React using a mixin called ReactMeteorData, which you can then access using getMeteorData(). In this demo, we will use the digilord:faker package to create a bunch of fake data, then use that data to pass it into our app.

Step 1

The first step is to add the ReactMeteorData mixin and the getMeteorData() function to each of your components. The code you need to add looks like this:

mixins: [ReactMeteorData],
getMeteorData() {
  return {  }
},

You will add this snippet to each of your components at the same level as your render() function. For example, your client/components/Home.jsx file will now look like this:

Home = React.createClass({
  mixins: [ReactMeteorData],
  getMeteorData() {
    return {    }
  },
  render() {
    return <h1>Home</h1>
  }
});

At the moment, this is not passing any data. First, we will create the data, then using Mongo.Collection we will pass it into our React component.

Step 2

First, install the digilord:faker package. NOTE: This package only works on the server:

$ meteor add digilord:faker

We’re going to create a bunch of fake data with the following schema:

{
  name: String,
  email: String,
  avatar: String
}

Now we’re going to create a new file to create our first collection. You can run the following command to create the file:

$ touch lib/collection.jsx

Within collection.jsx, create a collection called MyData by adding the following code:

MyData = new Mongo.Collection("myData");

Now that we have our new collection, we need to populate it with data. In server/server.jsx, add the following code, which will check to make sure the collection is empty, then add 25 people with names, email addresses, and avatars:

if (MyData.find().count() === 0) {
  _.each(_.range(25), function(){
    MyData.insert({
      name: faker.name.findName(),
      email: faker.internet.email(),
      avatar: faker.image.avatar()
    });
  });
}

Step 3

Now that we have this data, it’s time to pass it through to our Home component. In client/components/Home.jsx change the following line of code:

...
getMeteorData() {
  return {
    users: MyData.find().fetch()
  }
},
...

This will give you access to users within your React component using this.state.users. The next step is to loop over each of the users and create the list of users that we want to render. Add the following code to client/components/Home.jsx:

...
render() {
  let list = this.data.users.map(function(user) {
    return (
      <div className="item item-avatar" key={user._id}>
        <img src={user.avatar}></img>
        <h2>{user.name}</h2>
        <p>{user.email}</p>
      </div>
    )
  })
  return (
    <div className="list">
      {list}
    </div>
  )
}
...

And you’re done! You are now passing data from your Mongo.Collection to your React component.

Sam Corcos is the lead developer and co-founder of Sightline Maps, the most intuitive platform for 3D printing topographical maps, as well as LearnPhoenix.io, an advanced tutorial site for building scaleable production apps with Phoenix and React.

Meteor-React-Ionic Mobile App Part 2: Passing in Data

Step 1

Step 2

Step 3

Additional

Written by Sam Corcos