title: React: How to wrap component with HOC? (access login property across components)
body: <p>I have a react (with redux &amp; react-router) app that at various points needs to know whether or not a user is logged in based on the state of some data in the store and a bunch of other things tied to data in the store.</p>
  
  <p>To achieve this, I've created a higher order component like so:</p>
  
  <pre><code>import React from 'react';
  import {connect} from 'react-redux';
  
  export function masterComponent(Component){
  
    class MasterComponent extends React.Component {
  
      constructor(props){
        super(props);
      }
  
      loggedIn(){
        return this.props.player.token? true : false
      }
  
      render(){
        return (
          &lt;Component {...this.props} player={{loggedIn: this.loggedIn()}}/&gt;
        );
      }
    }
  
    UserComponent.propTypes = {
      player: React.PropTypes.object
    };
  
  
    function mapStateToProps(state) {
      return state;
    }
  
    return connect(
      mapStateToProps
    )(MasterComponent);
  
  }
  </code></pre>
  
  <p>My question is how is best to wrap this around my individual components? Currently I have implemented it so that each individual component is wrapped when passed to connect which works fine but feels a little inefficient. ie:</p>
  
  <pre><code>import {masterComponent} from '../HigherOrderComponents/MasterComponent';
  
  export class ResultsPage extends React.Component {
  
    constructor(props){
  .....
    }
  
  
    render(){
      return (
         .....
      );
    }
  }
  
  
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(masterComponent(ResultsPage));
  </code></pre>
  
  <p>Is there a better way to do this?</p>