Property 'item' does not exist on type 'IntrinsicAttributes & { name: string; href: s-CodePudding

I'm learning TypeScript to use in a personal React project. I'm having difficulty resolving this error:

ERROR in src/components/navigation/Navigation.tsx:16:27
TS2322: Type '{ item: { name: string; href: string; }; }' is not assignable to type 'IntrinsicAttributes & { name: string; href: string; }'.
  Property 'item' does not exist on type 'IntrinsicAttributes & { name: string; href: string; }'.
    14 |         <Navbar.Brand>{data.navbar.navBrand}</Navbar.Brand>
    15 |         { data.navbar.navItems.forEach(navItem => {
  > 16 |           <NavigationItem item={navItem} />
       |                           ^^^^
    17 |         })}
    18 |       </Container>
    19 |     </Navbar>

What I have is the following:

// Navigation.tsx
// Bootstrap imports
import { Container, Navbar } from 'react-bootstrap';

// Component imports
import NavigationItem from './NavigationItem';

// Import data
import data from '../../data/data.json';

const Navigation = () => {
  return (
    <Navbar bg='light'>
      <Container>
        <Navbar.Brand>{data.navbar.navBrand}</Navbar.Brand>
        { data.navbar.navItems.forEach(navItem => {
          <NavigationItem item={navItem} />
        })}
      </Container>
    </Navbar>
  );
};

export default Navigation;

// NavigationItem.tsx
const NavigationItem = (props: {name: string, href: string }): JSX.Element => {
  return <a href={props.href}>{props.name}</a>;
};

export default NavigationItem;

// data.json
{
  "navbar": {
    "navBrand": "My Name",
    "navItems": [
      {
        "name": "Bio",
        "href": "#bio"
      },
      {
        "name": "Projects",
        "href": "#projects"
      },
      {
        "name": "Articles",
        "href": "#articles"
      },
      {
        "name": "Resume",
        "href": "#resume"
      },
      {
        "name": "Contact",
        "href": "#contact"
      }
    ]
  }
}

My expectation is that this should work because <NavigationItem /> is receiving an object (navItem) and has the necessary type declaration for props (props: {name: string, href: string }).

What am I missing here?

CodePudding user response：

In your NavigationItem.tsx, you are expecting a props which is having only name and href

But, when you are using NavigationItem.tsx in Navigation.tsx, you are passing it in the attribute named item. So, edit your NavigationItem.tsx

const NavigationItem = (props: {item:{name: string, href: string }}): JSX.Element => {
 return <a href={props.item.href}>{props.item.name}</a>;
};

export default NavigationItem;

Or, edit your NavigationItem in Navigation.tsx like this

<NavigationItem {...navItem} />

CodePudding user response：

You are expecting an object as:

{ name: string; href: string; }

and passing as:

{ item: { name: string; href: string; }; }

1) Both of their types are different, so what you can do is:

<NavigationItem item={navItem} />

and expect as:

interface IItem {     // IItemp type contains name and href
    name: string,
    href: string
}

interface INavigationItemProps {
    item: IItem      // Expecting an item of type IItem
}

// NavigationItem.tsx
const NavigationItem = (props: INavigationItemProps): JSX.Element => {
    return <a href={props.item.name}>{props.item.href}</a>;  // NOTICE
};

2) You can pass just name and href as:

<NavigationItem { ...item } />

and

// NavigationItem.tsx
const NavigationItem = (props: { name: string, href: string }): JSX.Element => {
    return <a href={props.href}>{props.name}</a>;
};