title: Export function inside functional component in react
body: <p>It is possible to export a function that is inside a functional component and that can be imported into another?
  Example code: <a href="https://codesandbox.io/s/blissful-sanne-chk5g?file=/src/App.js:0-275" rel="nofollow noreferrer">https://codesandbox.io/s/blissful-sanne-chk5g?file=/src/App.js:0-275</a></p>
  <p>Component One:</p>
  <pre><code>import React from 'react'
  
  const componentOne = () =&gt; {
  
      function hello(){
      console.log(&quot;Hello, says the componentOne&quot;)
    }
    return (
      &lt;div&gt;
        
      &lt;/div&gt;
    )
  }
  
  export default componentOne
  </code></pre>
  <p>Component Two:</p>
  <pre><code>import React from 'react'
  import {hello} from &quot;./ComponentOne&quot;
  
  const componentTwo = () =&gt; {
  
     
    return (
      &lt;div&gt;
        
      &lt;button
      onClick={hello}&gt;
          Hello
      &lt;/button&gt;
  
      &lt;/div&gt;
    )
  }
  
  export default componentTwo
  </code></pre>
  <p>App.js</p>
  <pre><code>import ComponentTwo from &quot;./components/ComponentTwo&quot;;
  import &quot;./styles.css&quot;;
  
  export default function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
        &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
        &lt;ComponentTwo /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>