title: Can I put class base components inside function base components to use react hooks?
body: <p>I have an app that was written mainly with class base react components, however we are implementing a paywall feature with Stripe.</p>
  <p>The issue is stripe uses hooks, which don't work with class base components. Is it possible to put a child class base component into a parental function base component in order to achieve this. How would I go about doing this without rewriting every component as a function base component.</p>
  <p>Every attempt to include a function base component with class base children always yields this error:</p>
  <p>Error: Invalid hook call.  Hooks can only be called inside of the body of a function component.</p>
  <p>Are there any work arounds, or should I re-write the all the components as functional components?</p>
  <p>A quick example using react-router-dom for query parameters, then passing those into a class base child component.</p>
  <pre><code> function useQuery() {
     return new URLSearchParams(useLocation().search);
   }
  
  const App = () =&gt; {
  let query = useQuery();
  
  return (
    &lt;Provider store={store}&gt;
      &lt;Router&gt;
        &lt;div className=&quot;App&quot;&gt;
          &lt;Navbar /&gt;
          &lt;Switch&gt;
            {/* Public Pages */}
            &lt;Route exact path=&quot;/&quot; component={Landing} ref={query.get('ref')} /&gt; 
         &lt;/Switch&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    &lt;/Provider&gt;
  )
  }
   export default App;
  </code></pre>
  <p>Then assuming that the landing components is a simple class base component that will set the prop into the state.</p>