React Redux Connect wrap component - reactjs

Question

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()?
Code 1
const Header = ({ currentUser }) => (
<div className='header'>
<Link className='logo-container' to='/'>
<Logo className='logo' />
</Link>
</div>
);
const mapStateToProps = state => ({
currentUser: state.user.currentUser
});
export default connect(mapStateToProps)(Header);
Code 2
import React from 'react';
import {connect} from 'react-redux';
export default function Header({currentUser}) {
return (
<div className='header'>
<Link className='logo-container' to="/">
<Logo className='logo' />
</Link>
<div className='options'>
<Link className='option' to="/shop">
SHOP
</Link>
<Link className='option' to="/shop">
CONTACT
</Link>
{
currentUser ?
<div className='option' onClick={() => auth.signOut()}>SIGN OUT</div>
:
<Link className='option' to="/signin">SIGN IN</Link>
}
</div>
</div>
)
}

Answer 1

I believe this should work:
import React from 'react';
import {connect} from 'react-redux';
export default connect(mapStateToProps)(function({currentUser})) {
return (
<div className='header'>
<Link className='logo-container' to="/">
<Logo className='logo' />
</Link>
<div className='options'>
<Link className='option' to="/shop">
SHOP
</Link>
<Link className='option' to="/shop">
CONTACT
</Link>
{
currentUser ?
<div className='option' onClick={() => auth.signOut()}>SIGN OUT</div>
:
<Link className='option' to="/signin">SIGN IN</Link>
}
</div>
</div>
)
}
Then, you can import it at any file using this line:
import AnyNameYouWant from './Header.js';
If we would have exported it like this:
export const Header = connect(mapStateToProps)(function({currentUser})) {...
Then you would have needed to change your import statements to this:
import { Header } from './Header.js';
Hope it helps.