title: React: How do I get a HOC's state within the wrapped component? Can I get a simple example of how HOC's would pass such a value?
body: <p>I followed <a href="https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial" rel="nofollow noreferrer">this tutorial here</a> and took some of the logic for my own application. But because I have never made my own Higher Order Component before, nor worked with the Context API, I don't understand what's going on in the code.</p>
  
  <p>For context, I have built two or three projects with React, but I never used the Context API or built a custom Higher Order Component with them. So I don't understand what I can do with those.</p>
  
  <p>I am hoping to get the following out of this thread:</p>
  
  <p>(1) Instructions on accessing my HOC's <code>this.state.authUser</code> value.
  (2) An example of how a HOC can pass data from itself to the wrapped component.</p>
  
  <p>Hypothetically they're basically the same question.</p>
  
  <p>I think I've almost got access to the HOC's state in the wrapped component in my code, but I don't understand how to access the passed values in the wrapped component (its called "InboxPage"). Check out the HOC, <code>withAuthentication</code>:</p>
  
  <pre><code>import React from 'react';
  
  import AuthUserContext from './context';
  import { withFirebase } from '../Firebase';
  
  const withAuthentication = Component =&gt; {
      class WithAuthentication extends React.Component {
          constructor(props) {
              super(props);
  
              this.state = {
                  authUser: null,
              };
          }
  
          componentDidMount() {
              this.listener = this.props.firebase.auth.onAuthStateChanged(
                  authUser =&gt; {
                      authUser
                          ? this.setState({ authUser })
                          : this.setState({ authUser: null });
                  },
              );
          }
  
          componentWillUnmount() {
              this.listener();
          }
  
          render() {
              return (
                  &lt;AuthUserContext.Provider value={this.state.authUser}&gt;
                      {/* &lt;Component {...this.props} /&gt; */}
                      &lt;Component {...{ ...this.props, authUser: this.state.authUser }} /&gt;
                  &lt;/AuthUserContext.Provider&gt;
              );
          }
      }
  
      return withFirebase(WithAuthentication);
  };
  
  export default withAuthentication;
  </code></pre>
  
  <p>I think the <code>&lt;AuthUserContext.Provider value={this.state.authUser}&gt;</code> line should make <code>this.state.authUser</code> available within the the wrapped component if I <code>import AuthuserContext</code> again and place it in the render method like so:</p>
  
  <pre><code>class InboxPage extends Component {
  
  // ...
  
  render() {
          return (
               &lt;AuthUserContext.Consumer&gt;
                      &lt;h1&gt;Welcome to the Inbox.&lt;/h1&gt;
                      &lt;p&gt;The Inbox is for authenticated users only.&lt;/p&gt;
                  &lt;/AuthUserContext.Consumer&gt;
          )
      }
  </code></pre>
  
  <p>But that doesn't meet my needs because I have to have access to the value <em>outside</em> of the render method in the <code>componentDidMount</code> part of my InboxPage component.</p>
  
  <p>I asked this question on Reddit and someone suggested changing <code>&lt;Component {...this.props} /&gt;</code> to <code>&lt;Component {...{ ...this.props, authUser: this.state.authUser }} /&gt;</code>. So I did. Then I tried writing in <code>InboxPage.js</code>:</p>
  
  <pre><code>componentDidMount() {
  
          console.log(this.props.authUser)
          this.props.firebase.getUsersChatrooms("placeholder").then(res =&gt; console.log("3:", res))
      }
  </code></pre>
  
  <p>but console.log logged a null value.</p>
  
  <p>Edit: My ultimate goal is to use the <code>authUser</code> object set into withAuthentication state to get the username of the currently signed in user in my InboxPage component.</p>
  
  <hr>
  
  <p>Oddly, this was a question I couldn't find on Google. My attempts to Google the question yielded <em>lots</em> of questions about "how do I pass the wrapped component's state up to the HOC?" but none about passing it back down. Examples: <a href="https://stackoverflow.com/questions/44034814/how-to-access-a-wrapped-component-state-from-hoc">Example one</a>, <a href="https://stackoverflow.com/questions/45049629/reactjs-how-to-get-state-value-into-container">"How to get state value into container?"</a> (was almost suitable), <a href="https://medium.com/@rossbulat/how-to-use-react-higher-order-components-c0be6821eb6c" rel="nofollow noreferrer">this page</a>, and <a href="https://stackoverflow.com/questions/54824123/can-i-pass-component-state-to-hoc">"Can i pass component state to HoC?"</a>. Again, I looked but my Google searches yielded results about passing state the opposite direction.</p>
  
  <p>Help is greatly appreciated! I've been stuck for days because of my ineptitude. You guys are great!</p>