Using react with meteor results in find not a function

Question

I'm attempting to learn the react way of working with meteor and running into a pretty crucial, yet pretty basic problem. I'm trying to subscribe to some data, and then render that as a react component, and use react-template-helper to display that component.

As soon as I try to render that component I get the following errors in the console.

Exception from Tracker afterFlush function: undefined
findOne is not a function

Or

find is not a function

My app template:

<template name="appLayout">
    <nav class="fixed">
        <ul class="centered">
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>

        <ul class="social">
            <li><a href=""><i class="icon"></i></a></li>
            <li><a href=""><i class="icon"></i></a></li>
        </ul>
    </nav>
    {{> Template.dynamic template=yield}}
</template>

<template name="home">
    <section class="home-hero">
        {{> React component=homeContent}}
    </section>
</template>

My react/meteor view logic:

Template.home.onCreated( function() {
    let template = this;
    template.autorun( function() {
        Meteor.subscribe('homecontent');
    })
});

homeContent = React.createClass({
    mixins: [ReactMeteorData],
    getMeteorData() {
        return {
            homeData: homeContent.find({}).fetch()
        }
    },
    render(){
        return (
            <div className="units-container">
                <div className="units-row centered-content stacked">
                    <h1>site name</h1>
                    <p>{this.data.homeData.homeCopy}</p>
                </div>
            </div>
        )
    }
})

Template.home.helpers({
    homeContent() {
        return homeContent
    }
})

My router:

FlowRouter.route('/', {
    action() {
        BlazeLayout.render('appLayout', {
            yield: 'home'
        })
    },
    name: 'home'
})

My server publication:

Meteor.publish('homecontent', function(){
    return homeContent.find();
})

I'm using the following packages to try and achieve react components through blaze: ecmascript, react, kadira:flow-router, kadira:blaze-layout, react-template-helper.

Of note, if I simply remove mixins and getMeteorData from my jsx file, everything renders fine and mini-mongo acts normally from the console.

Answer 1

Very simple mistake. at the line homeData: homeContent.find({}).fetch() the call homeContent refers to the react class I just made, not the collection I'm looking for.

The fix for this specific error is homeContent = React.createClass({ becomes homeComponent = React.createClass({