title: React Hooks (useState) and Mobx [No mobx-react-lite]
body: <p>in my react application (with typescript) I want to use React hooks (specifically useState) to manage the form state and meanwhile use it as an observable component for Mobx store but I get the error</p>
  
  <blockquote>
    <p>Hooks can only be called inside the body of a function component.</p>
  </blockquote>
  
  <p>so for instance in the following component</p>
  
  <pre><code>import * as React from "react";
  import { inject, observer } from "mobx-react";
  import { MyStore } from "./MyStore";
  
  interface IProps {
    myStore?: MyStore;
    id: string;
  }
  
  const MyComponent: React.FC&lt;IProps&gt; = props =&gt; {
    const [state, setState] = React.useState("");
    return (
      &lt;div&gt;
        &lt;h1&gt;{props.id}&lt;/h1&gt;
      &lt;/div&gt;
    );
  };
  export default inject("myStore")(observer(MyComponent));
  </code></pre>
  
  <p>I saw a solution but that was using <code>React.createContext</code> for exporting the store class. is not where the old approach for Mobx and Hooks? </p>
  
  <p>here is the <a href="https://codesandbox.io/embed/5vzv8n9y0x" rel="noreferrer">sanbox</a> for the example</p>