Unable to access data from Meteor in React

Question

When trying to access the root page I get a blank screen with no layout. I check developer tools and get an error in App.jsx

Uncaught TypeError: Cannot read property 'loggedIn' of undefined

This is my App component:

App = React.createClass({
  mixin: [ReactMeteorData],
  getMeteorData() {
    return {
      loggedIn: !!Meteor.user()
    };

  },
  showLayout() {
     return (
      <div className="container-fluid main-container">
        <div className="col-xs-3">
          {this.props.nav}
        </div>
        <div className="col-xs-9">
          {this.props.content}
        </div>
      </div>
    )
   },
   showLogin() {
     return (
      <div className="row">
        <div className="col-xs-12 text-center">
          <p>You must be logged in to do that.</p>
        </div>
        <Login />
      </div>
    )
   },
  render() {
    return(
      <div className="container-fluid main-container">
        <div className="row">
          { this.data.loggedIn ? this.showLayout() : this.showLogin() }
        </div>
      </div>
    )

  }
});

I'm not sure what the issue can be, I'm following along a tutorial.

Answer 1

You should have this:

mixins: [ReactMeteorData],

instead of this:

mixin: [ReactMeteorData],

(Note the 's')