title: Export function from React functional component and use it elsewhere
body: <p>I want to export function from one of my functional component that is using hooks to another one. I want to prevent redundant code appearing in my components.</p>
  
  <p>I have tried to create separate <code>function.js</code> file where I wanted to place some of my functions but <code>useDispatch</code> hook makes it impossible as it throws hell a lot of errors in every attempt to make it work.
  I was searching for solution and trying some <code>export</code> statements in different combinations.</p>
  
  <p>What I want to do is to export my <code>toggleDrawer</code> function from <code>Layout</code> component to other components and here's my code. I'm sure it's very easy and I'm missing something.</p>
  
  <pre><code>import React from 'react'
  import { useSelector, useDispatch } from 'react-redux'
  import Header from '../Header/header'
  import DrawerItems from '../DrawerItems/drawerItems'
  import { REDUCERS } from '../../Config/config'
  
  import Container from '@material-ui/core/Container'
  import Drawer from '@material-ui/core/Drawer'
  import { makeStyles } from '@material-ui/core/styles'
  
  const useDrawerStyles = makeStyles({
      paper: {
          width: '175px',
          padding: '10px'
      }
  })
  
  const Layout = props =&gt; {
      const { isDrawerOpened } = useSelector(state =&gt; {
          return {
              ...state.interface_reducer
          }
      })
      const dispatch = useDispatch()
      const drawerClasses = useDrawerStyles()
  
      const toggleDrawer = (side, open) =&gt; event =&gt; {
          if (event.type === 'keydown' &amp;&amp; (event.key === 'Tab' || event.key === 'Shift')) {
              return null
          }
  
          dispatch({
              type: REDUCERS.TOGGLE_DRAWER,
              payload: open
          })
      }
  
      return (
          &lt;Container&gt;
              &lt;React.Fragment&gt;
                  &lt;Header/&gt;
                  &lt;Drawer classes={{paper: drawerClasses.paper}} open={isDrawerOpened} onClose={toggleDrawer('left', false)} &gt;
                      &lt;DrawerItems/&gt;
                  &lt;/Drawer&gt;
                  { props.children }
              &lt;/React.Fragment&gt;
          &lt;/Container&gt;
      )
  }
  
  export default Layout
  </code></pre>