title: How to move react event handlers to separate file ,export and then import for reuse in multiple different functional components?
body: <p>I have a React functional component which prints a counter number being incremented or decremented on button clicks..Below is my function</p>
  <p>I am using react version :  ^16.13.1</p>
  <pre><code>export default function  Counter(){
      const [count, setCount] = useState(0);
  
      const increment = () =&gt; {
          //more logic here ..
          setCount(count + 1);
      }
      const decrement = () =&gt; {
          //more logic here ..
          setCount(count !== 0 ? count - 1 : 0);
      }
      return (
          &lt;div&gt;
            &lt;p&gt;You clicked {count} times&lt;/p&gt;
            &lt;button onClick={() =&gt; increment()}&gt;Increment SO&lt;/button&gt;
            &lt;button onClick={() =&gt; decrement()}&gt;Decrement SO&lt;/button&gt;
          &lt;/div&gt;
        );
  } 
  </code></pre>
  <p>I want to separate event handlers logic that includes setting state in to a separate file and export it..  like below</p>
  <pre><code>import React, { useState } from 'react';
  
  const Increment = () =&gt; {
      //more logic here ..
      setCount(count + 1);
  }
  const Decrement = () =&gt; {
      //more logic here ..
      setCount(count !== 0 ? count - 1 : 0);
  }
  
  
  export default { Increment, Decrement };
  </code></pre>
  <p>I wanted to use these exported functions in the Counter function like below</p>
  <pre><code>import CounterHelper from './CounterHelper';
  &lt;button onClick={() =&gt; CounterHelper.Increment()}&gt;Increment SO&lt;/button&gt;
  </code></pre>
  <p>I have run in to several error's while running this ,so i am sure i am missing some thing fundamental here. Can somebody please tell me if this is possible at all ? are there any alternate options to achieve the above said with functional component and react hooks only.</p>
  <p>Thanks in advance.</p>