title: How can ı pass function with state for react useContext
body: <p>Trying to learn how to use <strong>react hooks</strong>. I use <strong>createContext</strong> and I want to transfer together state and a function to other components, but I need help with how to do this. I also want to ask if it makes sense to do so.</p>
  
  <p>In fact, I can update state by using <strong>setState</strong> in my case, but by defining a function in context, I think it makes more sense to use this function anywhere. Am I wrong ?</p>
  
  <p>my context is : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export const ExpenseContext = createContext();
  
  export const ExpenseProvider = props =&gt; {
    const [expense, setExpense] = useState(initialExpenses)
  
    const clearItems = () =&gt; {
      setExpense([])
    }
  
    return ( &lt;
      ExpenseContext.Provider value = {
        [expense, setExpense],
        clearItems
      } &gt; {
        props.children
      } &lt;
      /ExpenseContext.Provider&gt;
    )
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The component I want to use this function : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const ExpenseList = () =&gt; {
    const [expense, setExpense] = useContext(ExpenseContext);
    const {
      clearItem
    } = useContext(ExpenseContext);
  
    //   const clearItems = () =&gt; { normally this works ı know! 
    //     setExpense([])
    // }
  
    return ( &lt;
      &gt;
      &lt;
      List &gt; {
        expense.map((expense) =&gt; {
          return &lt;Item key = {
            expense.id
          }
          expense = {
            expense
          }
          /&gt;;
        })
      } &lt;
      /List&gt; &lt;
      div className = "text-center" &gt; {
        expense.length &gt; 0 &amp;&amp; ( &lt;
          Button onClick = {
            clearItems
          }
          type = "danger"
          shape = "round"
          icon = { &lt; DeleteOutlined / &gt;
          } &gt;
          Clear Expenses &lt;
          /Button&gt;
        )
      } &lt;
      /div&gt; &lt; /
      &gt;
    );
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>in this case, it is possible to use this function directly within the component without trying to transfer the function. But what I'm curious about is how I can manage to transfer and receive functions.</p>
  
  <p>Note: when I try to use it in this way, I get this error: <code>TypeError: Object is not a function</code></p>