Rendering list of messages from user document

Question

I'm simply trying to render the list of messages on a user document from the Meteor.users Collection.

In accordance with what's shown in the guide, I tried the following:

import React, { PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { Meteor} from 'meteor/meteor'

class Messages extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            messages: [],
        }
    }

    renderMessages() {
        console.log('usr: ' + this.props.usr) //<- undefined

        //so this wont work
        let msgs = this.props.profile.siteMessages.map((obj) => {
            return (
                <li key={obj.toString()}>
                    <div>a message </div>
                </li>
            );
        })

        return msgs;
    }

    render() {
        return (
            <div className="messages">
                <ul className="messages-list">
                    {this.renderMessages()}
                </ul>
            </div>
        );
    }
}

Messages.propTypes = {
  usr: PropTypes.object.isRequired,
};

export default createContainer(() => {

  return {
    usr: Meteor.user(),
  };
}, Messages);

Please note, calling Meteor.user() in the browser console prints the user object as expected. In the above code, this.props.usr (as well as just Meteor.user()) is undefined.

I have a field on the user.profile document called siteMessages that simply contains an array of messages, and I need to render them out to the <ul>.

Why is Meteor.user() undefined in code, though returns correctly if called from the browser console?

Answer 1

Meteor.user() is not immediately available (I'm not sure on the technical details of that), though Meteor.userId() is. Meteor.user() is reactive, so your container will rerun/rerender when the user data is present. I'd just modify your render to be:

render() {
    if (!this.props.usr) return null; // or a spinner, if you want

    return (
        <div className="messages">
            <ul className="messages-list">
                {this.renderMessages()}
            </ul>
        </div>
    );
}