title: React Redux Connect wrap component
body: <p>Im learning react and the instructor creates components as in Code 1 where as I create the function as in Code 2. How do we wrap code 2 within Redux Connect()?</p>
  <p><strong>Code 1</strong></p>
  <pre><code>const Header = ({ currentUser }) =&gt; (
    &lt;div className='header'&gt;
      &lt;Link className='logo-container' to='/'&gt;
        &lt;Logo className='logo' /&gt;
      &lt;/Link&gt;
      
      
    &lt;/div&gt;
  );
  const mapStateToProps = state =&gt; ({
    currentUser: state.user.currentUser
  });
  
  export default connect(mapStateToProps)(Header);
  
  </code></pre>
  <p><strong>Code 2</strong></p>
  <pre><code>import React from 'react';
  import {connect} from 'react-redux';
  
  
  export default function Header({currentUser}) {
      return (
          &lt;div className='header'&gt;
              &lt;Link className='logo-container' to=&quot;/&quot;&gt;
                  &lt;Logo className='logo' /&gt;
              &lt;/Link&gt;
              &lt;div className='options'&gt;
                  &lt;Link className='option' to=&quot;/shop&quot;&gt;
                      SHOP
                  &lt;/Link&gt;
                  &lt;Link className='option' to=&quot;/shop&quot;&gt;
                      CONTACT
                  &lt;/Link&gt;
                  {
                      currentUser ?
                      &lt;div className='option' onClick={() =&gt; auth.signOut()}&gt;SIGN OUT&lt;/div&gt;
                      :
                      &lt;Link className='option' to=&quot;/signin&quot;&gt;SIGN IN&lt;/Link&gt;
                  }
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>