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;
Top comments (1)
Please share minimum reproducable example in TS playfround and share the link