CODEWITHSUNDEEP
typescriptnext.js
HJW
HJW

Reputation: 1032

Typescript throws "is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }"

I know this has been discussed at length, but not other SO solutions seem to work, or I fail at implementing them.

I am brand new to typescript, and have the following:

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;

While I am not sure I even implemented TypeScript correctly, the compiler throws 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 compiler underlines the departments prop on the <List> component.

Why is this error being thrown, and how do I fix it?

Upvotes: 1

Views: 4381

Answers (1)

OliverRadini
OliverRadini

Reputation: 6467

Typescript is trying to tell you that you're trying to give the property departments to an object (in this case, a React component) which doesn't have that property on its type.

The type 'IntrinsicAttributes & { children?: ReactNode; }' is just the default typing for a react component; provided that departments is not included in the props of that type (and it isn't) then you can't pass that prop to the List component.

To fix this, you just need to add departmentsto the definition of List's props

Upvotes: 4

Related Questions