Meteor.user() and .userId() undefined in my component

react
1

Hi there,

I’m relatively experienced with Meteor and React in general, however I can’t figure out why this simple piece of data returns undefined every single time.

import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { Icon } from 'react-materialize';

export class NavMedewerker extends React.Component{
    
    constructor(props) {
        super(props);
    }
    
    render() {
        console.log(this.props.currentUser);
        return(
            <div>
                <nav>
                    <div className="nav-wrapper">
                    
                        <a href="/#" className="brand-logo">
                            <img className="responsive-img" src="/img/logo.png" alt="" style={{ maxHeight: 56 + 'px'}}></img>
                        </a>
                        
                        <a href="#" data-activates="mobile-demo" className="button-collapse">
                            <i className="material-icons">menu</i>
                        </a>
                        
                        <ul id="main-nav" className="right hide-on-med-and-down">
                        {this.props.currentUser ?
                            this.props.currentUser._id
                            : ''
                        }
                        </ul>
                        
                        <ul className="side-nav" id="mobile-demo">
                            <li><a href="/">Home</a></li>
                            <li><a className="dropdown-button" data-activates="dropproductside">Producten<i className="material-icons right">arrow_drop_down</i></a></li>
                            <li><a className="dropdown-button" data-activates="dropwinkelside">Winkels<i className="material-icons right">arrow_drop_down</i></a></li>
                        </ul>
                        
                    </div>
                </nav>
            </div>
        );
    }
}

NavMedewerker.propTypes = {
  currentUser: PropTypes.object,
};

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

Whenever I login, the Meteor.userId() is correctly printed to the console from the Login-page component, however when I feed it to the NavMedewerker component, it returns as undefined. Any ideas?

2

This has been fixed since the time of asking thanks to the members of the gitter chatroom for meteor.

The issue had to do with the fact that I am using FlowRouter and mounted the component rather than the container first.