Using account package correct with react

react
1

I have a conditional toolbar which displays either login/registration buttons or user information with logout button.

What works is:

render() {
  return (
    <div>
      {!Meteor.userId() ?
        <LoginButton />
        <RegButton />
        : <h1>Oh you've logged in</h1>
       }

What does not work though:

render() {
  return (
    <div>
      {!Meteor.userId() ?
        <LoginButton />
        <RegButton />
        : <h1>your email is: </h1> {Meteor.user().emails[0].address}
       }

Why can’t I access Meteor.user() if userId delivers something?
It works one time after hot realoding but on refresh everything is broken again.

Using Flow router with Redux on Mantra architecture

2

You can’t use userId and user in your render function directly because it won’t be reactive. You need to put it in a container component instead.

1 Like
3

Didn’t use containers to this point. It was the missing piece.

meteor add react-meteor-data
npm i react-addons-pure-render-mixin --save

./containers/UserEmailContainer.js
import { createContainer } from ‘meteor/react-meteor-data’;
import UserEmail from ‘…/components/UserEmail.jsx’;

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

./components/UserEmail.jsx
import React from ‘react’;

export default class UserEmail extends React.Component {
  render() {
    return (
      <div>
        {this.props.user.emails[0].address}
      </div>
    );
  }
}

UserEmail.propTypes = {
  user: React.PropTypes.object,
};

and the just use

import UserEmailContainer from ‘.containers/UserEmailContainer’
…
render(
…
<UserEmailContainer />

Still far from perfect but it works now :slight_smile: Thanks

1 Like