title: TypeScript fetch api with react
body: <p>I created a custom hook to fetch an API and I wanna pass the data to the component and getting this type of error. I'm new to react and typescript</p>
  <p>my custom useFetch code:</p>
  <pre class="lang-ts prettyprint-override"><code>import { useEffect, useState } from &quot;react&quot;;
  
  export interface IBlog {
      data: {
          title: string;
          body: string;
          author: string;
          id: number
          url: string;
      }[]
  }
  const useFetch = (url: string) =&gt; { // url: string
  
      const [data, setData] = useState&lt;IBlog['data']&gt;([]);
      const [isPending, setIsPending] = useState(false);
      const [error, setError] = useState(null);
  
      useEffect(() =&gt; {
          const abortController = new AbortController();
  
  
          setTimeout(() =&gt; {
              fetch(url, { signal: abortController.signal })
                  .then(res =&gt; {
                      if (!res.ok) { // error coming back from server
                          throw Error('could not fetch the data for that resource');
                      }
                      return res.json();
                  })
                  .then(data =&gt; {
                      setIsPending(false);
                      setData(data);
                      setError(null);
                  })
                  .catch(err =&gt; {
                      if (err.name === &quot;AbortError&quot;) {
                          console.log('fech aborted');
                      } else {
                          // auto catches network / connection error
                          setIsPending(false);
                          setError(err.message);
                      }
                  })
          }, 1000);
  
          // cleanup funtion
          return () =&gt; abortController.abort();
  
      }, [url])
  
      return [data, isPending, error]
  }
  
  export default useFetch
  </code></pre>
  <p>and this is the component where I want to pass the data and getting my error</p>
  <pre class="lang-ts prettyprint-override"><code>import BlogList from &quot;./BlogList&quot;;
  import useFetch from &quot;./useFetch&quot;;
  import React, { FC } from 'react';
  import { IBlog } from &quot;./useFetch&quot;
  
  const Home: FC = () =&gt; {
  
      const [data, isPending, error] = useFetch(&quot;http://localhost:8000/blogs&quot;)
  
      console.log(data, isPending, error, &quot;from hook&quot;)
  
      return (
          &lt;div className='home'&gt;
              {error &amp;&amp; &lt;div&gt;{error}&lt;/div&gt;}
              {isPending &amp;&amp; &lt;div&gt;loading...&lt;/div&gt;}
              {data &amp;&amp; &lt;BlogList data={data} /&gt;}
          &lt;/div&gt;
      )
  }
  
  export default Home
  </code></pre>
  <p>and this is the component to display my data</p>
  <pre class="lang-ts prettyprint-override"><code>import BlogList from &quot;./BlogList&quot;;
  import useFetch from &quot;./useFetch&quot;;
  import React, { FC } from 'react';
  import { IBlog } from &quot;./useFetch&quot;
  
  const Home: FC = () =&gt; {
  
      const [data, isPending, error] = useFetch(&quot;http://localhost:8000/blogs&quot;)
  
      console.log(data, isPending, error, &quot;from hook&quot;)
  
      return (
          &lt;div className='home'&gt;
              {error &amp;&amp; &lt;div&gt;{error}&lt;/div&gt;}
              {isPending &amp;&amp; &lt;div&gt;loading...&lt;/div&gt;}
              {data &amp;&amp; &lt;BlogList data={data} /&gt;}
          &lt;/div&gt;
      )
  }
  
  export default Home
  </code></pre>
  <p>Error messege</p>
  <pre><code>    Failed to compile
      C:/Users/63906/Documents/Web Development/citcs-blogs/src/components/Home.tsx
      TypeScript error in C:/Users/63906/Documents/Web Development/citcs-blogs/src/components/Home.tsx(16,26):
      Type 'true | { title: string; body: string; author: string; id: number; url: string; }[]' is not assignable to type '{ title: string; body: string; author: string; id: number; url: string; }[]'.
        Type 'boolean' is not assignable to type '{ title: string; body: string; author: string; id: number; url: string; }[]'.  TS2322
      
          14 |       {error &amp;&amp; &lt;div&gt;{error}&lt;/div&gt;}
          15 |       {isPending &amp;&amp; &lt;div&gt;loading...&lt;/div&gt;}
        &gt; 16 |       {data &amp;&amp; &lt;BlogList data={data} title='All Blogs!' /&gt;}
             |                          ^
          17 |     &lt;/div&gt;
          18 |     )
          19 | }
  </code></pre>