I'm currently diving into TypeScript, and I've hit a roadblock when it comes to the correct assignment for my setState function that I need to pass to a component.
/index.tsx
import { Dispatch, SetStateAction, useState } from "react";
import FetchPokeAPI from "./api/FetchPokeAPI";
import Header from "./components/Header";
import ItemList from "./components/ItemList";
export interface IAllItems {
name: string;
url: string;
} [];
export default function Home() {
const [allItems, setAllItems] = useState<IAllItems[]>([]);
FetchPokeAPI(setAllItems);
return (
<>
<Header />
<ItemList items={allItems} />
</>
)
}
/FetchPokeAPI.tsx
import { Dispatch, SetStateAction, useEffect } from "react";
import { IAllItems } from "./../index";
interface IProps {
setAllItems: Dispatch<SetStateAction<IAllItems[]>>;
allItems: IAllItems[];
}
export default function FetchPokeAPI({setAllItems}:IProps) {
const pokeapiURL:string = "https://pokeapi.co/api/v2/item/";
useEffect(() => {
fetch(pokeapiURL)
.then((response) => response.json())
.then((data) => {
setAllItems(data.results);
})
.catch((error) => console.error(error));
}, [pokeapiURL]);
}
Upon encountering this issue:
Argument of type 'Dispatch<SetStateAction<IAllItems[]>>'
is not assignable to parameter of type 'IProps'
Thank you in advance :)
While other posts on forums have provided some guidance, I seem to be at a standstill now.