title: Why useContext does't work in my function?
body: <p>I'm trying to build a todo list app and I'm stuck with this problem. I'm very interested to see how i can fix this error.</p>
  
  <p>I have rearrange all my funciton to class component but that don't fix my error.</p>
  
  <p>List.js</p>
  
  <pre><code>import React, { createContext } from 'react';
  
  export let ListContext = createContext();
  
  export const Data = [
      {
          name: 'Joe',
          age: 19
      },
      {
          name: 'John',
          age: 16
      },
      {
          name: 'Claire',
          age: 17
      },
      {
          name: 'Alex',
          age: 16
      }
  ]
  
  export default class List extends React.Component {
  
      list = () =&gt; {
          let list = Data.map(Data =&gt; &lt;li key={Data.age}&gt;{Data.name}&lt;/li&gt;)
          return (
              &lt;div&gt;{list}&lt;/div&gt;
          )
      }
      render() {
          return (
              &lt;div&gt;
  
                  {this.list()}
              &lt;/div&gt;
          )
  
      }
  }
  </code></pre>
  
  <p>TodoForm.js</p>
  
  <pre><code>export default function Todo() {
      let inputValue = {
          value: ''
      }
      function handleChange(e) {
          inputValue.value = e.target.value;
      }
      function handleClick() {
          const value = useContext(ListContext);
      }
      return (
          &lt;React.Fragment&gt;
              &lt;div&gt;
                  &lt;input type="text" onChange={handleChange} className="inp" /&gt;
                  &lt;button onClick={handleClick} className="btn" &gt;Add New&lt;/button&gt;
  
              &lt;/div&gt;
  
          &lt;/React.Fragment&gt;
      )
  }
  
  </code></pre>
  
  <p>The useContext return this error: ./src/TodoForm.js
    Line 12:  React Hook "useContext" is called in function "handleClick" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks</p>