Error encountered while passing properties to component

Question

Error encountered while passing properties to component

I'm having trouble with a particular code snippet:

type MenuItemType = { name: string; link: string };

There's also an array of these types:

const menuItems: MenuItemType[] = [
    { name: "FAQ", link: "/faq" },
    { name: "Terms of use", link: "/terms" },
    { name: "Cookie policy", link: "/cookie-policy" },
    { name: "Privacy policy", link: "/privacy-policy" },
    { name: "Subscription", link: "/subscription" },
];

I have a component that accepts props of the same type:

function ListItem({ name, link }: MenuItemType) {
    return (
        <li className="text-xs mr-14 last:mr-0">
            <Link href={link}>
                <a>{name}</a>
            </Link>
        </li>
    );
}

The ListItem Component is used in a map function, and TypeScript is showing an error.

https://i.sstatic.net/0v4DG.png

Any ideas on what could be wrong?

typescript next.js

Answer 1

Answer №1

If you have created your ListItem component to expect individual props for the name and link, rather than a combined prop for the item, you will need to use it as follows:

<ListItem name={item.name} link={item.link} />
// or:
<ListItem {...item} />

However, if you prefer to pass a single item prop instead, you can modify ListItem like this:

function ListItem({ item }: { item: MenuItemType }) {
    return (
        <li className="text-xs mr-14 last:mr-0">
            <Link href={item.link}>
                <a>{item.name}</a>
            </Link>
        </li>
    );
}

Answer 2

If you have created your ListItem component to expect individual props for the name and link, rather than a combined prop for the item, you will need to use it as follows:

<ListItem name={item.name} link={item.link} />
// or:
<ListItem {...item} />

However, if you prefer to pass a single item prop instead, you can modify ListItem like this:

function ListItem({ item }: { item: MenuItemType }) {
    return (
        <li className="text-xs mr-14 last:mr-0">
            <Link href={item.link}>
                <a>{item.name}</a>
            </Link>
        </li>
    );
}

Error encountered while passing properties to component

Answer №1

Similar questions

"Exploring the power of D3, TypeScript, and Angular 2

Determine the conditional type based on the type of another variable

Obtain user_metadata from user session middleware in NextJs with Auth0

Fairly intricate React function component declaration with TypeScript

Creating a factory function through typhography

How to effectively handle null values using try..catch statement in typescript

The colors in React Material UI Theme provider remain consistent in version 5x and do not alter

Tips for handling a jest mock function of a module and TypeScript types

Encountered an error of 'npm ERR! invalid semver' when attempting to release an npm package

Creating an npm library using TypeScript model classes: A step-by-step guide

Using Typescript to combine strings with the newline character

Writing for: Either attribute "a" is defined or attributes "b" and "c" are both defined

Tips for passing TouchableOpacity props to parent component in React Native

Formatting database values in `where` conditions for strings in TypeORM: A simple guide

Having trouble converting the response into a valid TypeScript value for storage

implement some level of control within the ngFor directive in Angular

Transforming the velocity template within an API Gateway to be seamlessly integrated into Typescript using AWS CDK

I'm having trouble getting this text to align properly next to the image. Plus, I can't seem to achieve a horizontal screen alignment either

Steps to correcting the return data type of the final promise in a chain?

Can you explain the purpose of the _app.js and _document.js files in Next.js? What is the significance of using an underscore (_) in Next.js?