Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Type '{ category: Category; }' is not assignable to type 'IntrinsicAttributes'. Property 'category' does not exist on type 'IntrinsicAttributes'

I’m a beginner to TypeScript and NextJS and i’ve run into a problem where I can’t pass data to my form due to IntrinsicAttributes Error. This is the error I’m getting.

Type '{ category: Category; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'category' does not exist on type 'IntrinsicAttributes'.

I’m trying to send the category to the Edit Category Form but the above error is in the category attribute of EditCategoryForm.

export default async function EditCategoryPage({
  params,
}: {
  params: { id: string };
}) {
  const id = params.id;
  const category = await getCategoryById(id);

  return (
    <main>
      ...
      <EditCategoryForm category={category} />
    </main>
  );
}

This is my edit category form.

export default function EditCategoryForm({ category }: { category: Category }) {
 ...
}

This is my Category type.

export type Category = {
  id: number;
  name: string;
  //   subcategories: Subcategory[];
  subcategories: Subcategory[];
};

This is how I’m fetching the data. The data is fetched properly.

export async function getCategoryById(id: string) {
  noStore();
  try {
    const response = await fetch(API_URL_CATEGORIES + "/" + id + "/");
    const body: Category = await response.json();
    return body;
  } catch (error) {
    console.error("Database Error:", error);
    throw new Error("Failed to fetch category.");
  }
}

I’m unable to see the form due to this error. Am I declaring the props wrong? What is the Intrinsic Attributes error? I’ve passed everything properly though.

Tags:

2

Answers


  1. 0

    1. Within EditCategoryForm, ensure you’re correctly accessing properties of the category object.
      For ex: <input type="text" value={category.name} />

    2. If using {…category} solves your specific issue, it might be because the category object contains properties that are expected as separate props in your EditCategoryForm component. But it might not always be the best solution.

    Ref:
    Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes

    Login or Signup to reply.
  2. 0

    I have a solution but i am not sure if it will fit your requirements of your project, but i still want to give it a chance.

    I have made following changes to your code:

    EditCategoryPage.tsx:

    
    async function getCategoryById(id: string) {
        try {
            const response = await fetch('/category.json');
            const body: Category = await response.json();
            return body;
        } catch (error) {
            console.error("Database Error:", error);
            throw new Error("Failed to fetch category.");
        }
    }

    export default function EditCategoryPage(params: { id: string }) {
        const id = params.id;
        const category = getCategoryById(id);
    
        return (
            <main>
                <EditCategoryForm category={category}/>
            </main>
        );
    }

    App.tsx:

        function App() {
        return (
            <>
               <EditCategoryPage id={"2"} />
            </>
        );
    }

    EditCategoryForm.tsx:

        export default function EditCategoryForm( props : { category: Promise<Category> }) {
        props.category.then(value => {console.log(value)})
        return (
            <>
    
            </>
        )
    }

    This is my placeholder JSON File:

    
    {
      "id": 2,
      "name": "NAME",
      "subcategories": [
        {
          "id": 1,
          "something": "something.."
        }
      ]
    }

    Let me know if you have any trouble/issues with this solution.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search