reactjs - React doesn't change to LoggedInView when Meteor user logs in -

i developing react + meteor application , i'm having trouble user login functionality.

i have header navbar displays different component based on whether or not user logged in.

like this:

export default class header extends component {     constructor(props) {         super(props)          this.state = {             user: meteor.user()         }     }      render() {         return (             <header classname="main-header">                 <nav classname="navbar navbar-static-top">                     <div classname="navbar-custom-menu">                         {this.state.user() !== null ? <loggedinnavigation /> : <loggedoutnavigation />}                     </div>                 </nav>             </header>         )     } } 

now works doesn't change upon user being logged in. have refresh page in order change views (which not ideal).

here login code:

meteor.loginwithpassword(this.state.email, this.state.password, (error) => {     if (error)         this.setstate({ meteorerror: "error: " + error.reason })     else {         this.setstate({ meteorerror: "" })         // handle successful login     } }) 

the problem these 2 blocks of code sit in different components.

the first block in imports/ui/components/main-layout/header , second block in imports/ui/components/authentication/login.

as said, problem user can log in view doesn't change according authentication state. what's best practice solving this?

edit:

here hierarchy of components:

1 - loggedoutnav

mainlayout -> header -> loggedoutnav 

2 - login code

mainlayout -> routes -> (route path="/login" component={login}) -> loginform 

the problem here constructor of class run once , never again long component mounted. though meteor.user() change, state won't. component rerender when a) props change or b) state changes e.g. when call setstate. can leverage a) through meteors createcontainer hoc (react-meteor-data) wrap header class , set reactive data context it. when data changes, props header change , component rerenders. in code like:

import { meteor } 'meteor/meteor'; import { createcontainer } 'meteor/react-meteor-data'; import react, { component, proptypes } 'react';  class headercomponent extends component {     render() {         const { user } = this.props;         return (             <header classname="main-header">                 <nav classname="navbar navbar-static-top">                     <div classname="navbar-custom-menu">                         {user ? <loggedinnavigation /> : <loggedoutnavigation />}                     </div>                 </nav>             </header>         )     } }  export const header = createcontainer(() => {     // assuming have user publication of name...     meteor.subscribe('users/personaldata');     return {         user: meteor.user(),     }; }, headercomponent);