ElJefeJames ElJefeJames - 3 months ago 18
React JSX Question

How do I pass Meteor Subscription Data into React Component Props using ES6

Given this subscription, and the React Component below, how do I pass the subscription data in as props 'searchTerms'? Most of the documentation I can find refers to using mixins, but as far as I understand this is an anti pattern in ES6. Thanks!

constructor() {
super();
this.state = {
subscription: {
searchResult: Meteor.subscribe("search", searchValue)
}
}
}

render() {
return (
<div>
<SearchWrapper
searchTerms={this.state.subscription.searchResult}
/>
</div>
)
}

Answer

There are a couple options when it comes to creating containers in Meteor. My personal favorite is react-komposer.

Here's what your container would look like using react-komposer. Note that a container is simply a component that just passes data, and in the case of Meteor, provides reactivity.

After npm install --save react-komposer, create a container using:

import { Meteor } from 'meteor/meteor';
import React from 'react';
import { composeWithTracker } from 'react-komposer';

import Component from '../components/Component.jsx';
import { Collection } from '../../api/collection/collection.js';

// Creates a container composer with necessary data for component
const composer = ( props, onData ) => {
  const subscription = Meteor.subscribe('Collection.list');

  if (subscription.ready()) {
    const collection = Collection.find().fetch(); // must use fetch
    onData(null, {collection});
  }
};

// Creates the container component and links to Meteor Tracker
export default composeWithTracker(composer)(Component);