While there has been extensive discussion on this topic, I am unable to get any other solutions from SO to work, or I am struggling to implement them.
I am completely new to TypeScript, and here is what I have:
import faker from "faker";
import React from "react";
import Index from "../components/Index";
import List from "../components/List";
interface Props {
departments: [
{
id: number;
name: string;
}
];
}
const IndexPage: React.FunctionComponent<Props> = ({ departments }) => {
return (
<>
<Index />
<List departments={departments} />
</>
);
};
export async function getStaticProps() {
let departments: { id: number; name: string }[] = [];
for (let i = 0; i < 50; i += 1) {
const name: string = await faker.company.companyName();
departments = [...departments, { id: i, name }];
}
return {
props: {
departments,
},
};
}
export default IndexPage;
Even though I am uncertain about implementing TypeScript correctly, the compiler is showing this error:
Type '{ departments: [{ id: number; name: string; }]; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
Property 'departments' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.The error is specifically related to the departments prop in the <List> component.
What is causing this error to occur, and how can I resolve it?