title: React Native Hook issue - Error: Invalid hook call. Hooks can only be called inside of the body of a function component
body: <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>import { useParams } from 'react-router-dom';
  import useFetch from './useFetch';
  
  const BlogDetails = () =&gt; {
      const { id } = useParams();
      const { data: blog, error, isPending } = useFetch('http://localhost:3001/blogs/' + id);
  
      return (
          &lt;div className="blog-details"&gt;
              { isPending &amp;&amp; &lt;div&gt;...Loading...&lt;/div&gt;}
              { error &amp;&amp; &lt;div&gt;{error}&lt;/div&gt;}
              { blog &amp;&amp; (
                  &lt;article&gt;
                      &lt;h2&gt;{blog.title}&lt;/h2&gt;
                      &lt;p&gt;Written by {blog.author}&lt;/p&gt;
                      &lt;div&gt;{blog.body}&lt;/div&gt;
                  &lt;/article&gt;
              )}
          &lt;/div&gt;
      );
  }
  
  export default BlogDetails;</code></pre>
  </div>
  </div>
  </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>import {useState, useEffect} from 'react';
  
  const useFetch = (url) =&gt; {
          const [data, setData] = useState(null);
          const [isPending, setIsPending] = useState(true);
          const [error, setError] = useState(null);
  
      useEffect(() =&gt; {
          const abortCont = new AbortController();
  
          fetch(url, { signal: abortCont.signal })
              .then(res =&gt; {
                  if(!res.ok){
                      throw Error('404 - data not found!');
                  } 
                  return res.json();
              })
              .then(data =&gt; {
                  setData(data);
                  setIsPending(false);
                  setError(null);
              })
              .catch(err =&gt; {
                  if (err.name === 'AbortError') {
                      console.log('fetch aborted');
                  } else {
                      setIsPending(false);
                      setError(err.message);
                  }
              })
  
              return () =&gt; abortCont.abort();
      }, [url]);
  
      return {data, isPending, error}
  }
  
  export default useFetch;</code></pre>
  </div>
  </div>
  </p>
  <p>I am fairly new to react and i have spent about 2 days searching, adding and removing packages on VSCode to no avail.</p>
  <p>I am following the Net Ninja's recent tutorial on Youtube and I am stuck on step #25.
  (<a href="https://www.youtube.com/watch?v=t7VmF4WsLCo&amp;t=4s" rel="nofollow noreferrer">https://www.youtube.com/watch?v=t7VmF4WsLCo&amp;t=4s</a>)</p>
  <p>I have copied the code exactly but the issue seems somewhere else in React.</p>
  <p>If anyone could help or point me in the right direction, it would be greatly appreciated.</p>
  <p><a href="https://i.stack.imgur.com/hGh2M.png" rel="nofollow noreferrer">This is the error that is giving each time I try to access the page. It is thrown for any of the pages that is not on the main page.</a></p>