Type error when passing props to component

kevin

Hello I have a type that looks like this:

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

Also an array of those 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" },
];

And a component that takes some props that are of this 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 rendered in a map function, and this is where typescript is complaining.

enter image description here

What am i doing wrong?

Nicholas Tower

You've defined your ListItem component so it expects separate props for the name and link, not a combined prop of the item. So if ListItem is correct, you'll use it like this:

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

Alternatively, if you want to pass in a single item prop, rewrite ListItem to 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>
    );
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

TypeScript error when passing untyped string to React component with typed props?

Passing props to a component - syntax error

TypeScript error in passing props to child component in react

React props destructuring when passing to component

Error Coming when passing props from one component to another and vice - versa in react using typescript

What is type of graphql refetch when passing as props?

Component not passing props to other component in same file when calling as const

Avoid component re-rendering when passing props to child component

Undefined error when passing props to children React

ReactJS error when passing a function as a props

Error when passing a laravel route as a props in VueJS

React element type is invalid - ES6 destructuring syntax error when passing props

React not passing props to component

Passing props values to component

Passing component and props as arguments

React Type error on sending props data to component

Passing location props to page generates build error - Link Component - Gatsby

Getting toogleShow is not function when passing as props in react typescript functional component

Why in React are curly brackets needed when passing props as an argument to a component?

Passing both match param and props into react component when using routing

If statement not working when passing props to functional component using Reactjs?

props is undefined when passing from parent to component in next js

Property 'dispatch' is missing in type error when passing root store to root component

how to type useSearchParams hook when passing it to props or function argument?

Passing props to deactivated component in Vue

Passing props to child component Cyclejs

Syntax for passing props to stateless component

Problem with passing props to child component

Passing props from layout to component