title: How to create global state with React Hooks [TypeScript]
body: <p>Currently I am trying to make a global state in React Hooks but encounter a problem.</p>
  <p>I just created a Provider in Store.tsx and tried with useContext to get the state in other component. But when I type in input with onChange handler there is no state updated? How does that come.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// App.tsx
  export const App: FC = () =&gt; {
    const [state, dispatch] = useContext(Context);
    console.log(state.todoList);
    const [inputValue, setInputValue] = useState("");
    const getValue = (target: string) =&gt; {
      setInputValue(target);
    };
  
    const addTodo = () =&gt; {
      dispatch({ type: "addTodo", payload: inputValue });
      setInputValue("");
    };
  
    return (
      &lt;&gt;
        &lt;input value={inputValue} onChange={(e) =&gt; getValue(e.target.value)} /&gt;
        &lt;button onClick={addTodo}&gt;
          Add Todo
        &lt;/button&gt;
        &lt;TodoList /&gt;
        {state.value}
      &lt;/&gt;
    );
  };
  
  
  // Store.tsx
  export const Store: FC = () =&gt; {
    const [state, dispatch] = useReducer(reducer, initialState);
    console.log(state);
  
    return (
      &lt;Context.Provider value={[state, dispatch]}&gt;
        &lt;App /&gt;
      &lt;/Context.Provider&gt;
    );
  };
  
  export const Context = createContext&lt;[IStateTypes, Dispatch&lt;any&gt;]&gt;([initialState, () =&gt; { }]);</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://codesandbox.io/s/github/chiholiu10/poker-game-react-hooks?file=/src/App.tsx" rel="nofollow noreferrer">Link to CodeSandbox</a></p>