Type 'boolean' is not assignable to type (react.js and TypeScript) error

Suliman-A — Sat, 24 Jul 2021 10:41:06 +0000

im new to react and typeScript. i created a custom hook to fetch an API and i want to pass my data to another component but for some reason im getting the following typeScript error.

pls suggest where im doing it wrong

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 | IBlog[]' 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 && <div>{error}</div>}
    15 |       {isPending && <div>loading...</div>}
  > 16 |       {data && <BlogList data={data} />}
       |                          ^
    17 |     </div>
    18 |     )
    19 | }

this is my custome hook to call the API

import { useEffect, useState } from "react";

export interface IBlog {
    data: {
        title: string;
        body: string;
        author: string;
        id: number
        url: string;
    }[]
}
const useFetch = (url: string) => { // url: string

    const [data, setData] = useState<IBlog['data']>([]);
    const [isPending, setIsPending] = useState(false);
    const [error, setError] = useState(null);

    useEffect(() => {
        const abortController = new AbortController();


        setTimeout(() => {
            fetch(url, { signal: abortController.signal })
                .then(res => {
                    if (!res.ok) { // error coming back from server
                        throw Error('could not fetch the data for that resource');
                    }
                    return res.json();
                })
                .then(data => {
                    setIsPending(false);
                    setData(data);
                    setError(null);
                })
                .catch(err => {
                    if (err.name === "AbortError") {
                        console.log('fech aborted');
                    } else {
                        // auto catches network / connection error
                        setIsPending(false);
                        setError(err.message);
                    }
                })
        }, 1000);

        // cleanup funtion
        return () => abortController.abort();

    }, [url])

    return [data, isPending, error]
}

export default useFetch

and this the home component which where i want to read my data and getting my error

import BlogList from "./BlogList";
import useFetch from "./useFetch";
import React, { FC } from 'react';
import { IBlog } from "./useFetch"

const Home: FC = () => {

    const [data, isPending, error] = useFetch("http://localhost:8000/blogs")

    console.log(data, isPending, error, "from hook")

    return (
        <div className='home'>
            {error && <div>{error}</div>}
            {isPending && <div>loading...</div>}
            {data && <BlogList data={data} />}
        </div>
    )
}

export default Home

and this is the BlogList component to loop and display my data

// import { Link } from "react-router-dom";
 import { IBlog as IProp } from "./useFetch"


const BlogList: React.FC<IProp> = ({ data }: IProp) => {

    const renderList = () => {
    return data.map((blogIndex) => {
        return (
                <div className='blog-preview' key={blogIndex.id}>
                    <a href={`/blogs/${blogIndex.id}`}>
                        <h2>{blogIndex.title}</h2>
                        <p>Written by {blogIndex.author}</p>
                    </a>

                </div>
            )

        })

    }
    return (
        <ul>
            {renderList()} 
        </ul>
    )

}

export default BlogList;

DEV Community: Suliman-A

Type 'boolean' is not assignable to type (react.js and TypeScript) error