How to make react-meteor-data work with react-mounter?


#1

I’m using Meteor 1.3 with React 15, and I’m using react-meteor-data as per the Todo tutorial to pass in reactive data to React, the only problem is that the data that I’m passing is undefined, see below:

MainLayout component:

export class MainLayout extends Component {
	constructor(props) {
		super(props);
	}

	render() {
		console.log("currentUser: ", this.props.currentUser); // undefined
		return (
			<div className="main-container">
    			<Header />

			    <div className="content-container">
			      {this.props.content}
			    </div>

    			<Footer />
  			</div>
		);
	}
}

MainLayout.propTypes = {
    currentUser: PropTypes.object,
    content: PropTypes.object.isRequired,
};

export default createContainer(() => {
  return {
    currentUser: Meteor.user(),
  };
}, MainLayout);

The route:

// Homepage
publicRoutes.route('/', {
  name: 'homepage',
  action() {
    mount(MainLayout, {
      content: <Homepage />
    })
  }
});

Am I not doing something right or these two don’t work in conjunction?

Thanks.


#2

Did you import the homepage?

I.e.

import { Homepage } from '../imports/ui/homepage.jsx';

Or something along those lines.


#3

Yup, the problem was that I had to pass the content variable in mount as a function, like content: (props) => <Homepage {…props} />