is not assignable to type 'IntrinsicAttributes (React.js and TypeScript.js)

Question

I am trying to create component in react. I am on learning mode. So may be I am doing totally wrong. Below is my code

import * as React from 'react'

import styles from './MegaMenu.module.scss'

interface IMenu {
  name: string
  link: string
  subitem?: IMenu[]
}

let menus: IMenu[]
menus = [
  {
    name: "Home",
    link: "#"
  },
  {
    name: "About Us",
    link: "#"
  },
  {
    name: "Products",
    link: "#",
    subitem: [
      {
        name: "SubItem 1",
        link: "#",
        subitem: [
          {
            name: "Sub-SubItem1",
            link: "#"
          },
          {
            name: "Sub-SubItem2",
            link: "#"
          }
        ]
      },
      {
        name: "SubItem 2",
        link: "#"
      }
    ]
  },
  {
    name: "Services",
    link: "#",
    subitem: [
      {
        name: "SubItem 1",
        link: "#"
      },
      {
        name: "SubItem 2",
        link: "#"
      }
    ]
  }
]

class MegaMenu extends React.Component {
  public render() {
    return (
      <div className={styles.MegaMenu}>
        <div className={styles["menu-container"]}>
          <div className={styles.menu}>
            <MenuList Options={menus} />
          </div>
        </div>
      </div>
    )
  }
}

const MenuList = (Options: IMenu[]) => {
  return (
    <ul>
      {
        Options.map((Option: IMenu) => (
          <li key="">
            <a href={Option.link}>{Option.name}</a>
            {/* Base Case */}
            {
              (Option.subitem && Option.subitem.length > 0) &&
              <MenuList Options={Option.subitem} />
            }
          </li>
        ))
      }
    </ul>
  )
}

export default MegaMenu

I get below error

Kindly somebody help me

user2529173 · Accepted Answer · 2019-12-12 09:24:17Z

1

Functional components can only have props as variable, therefore you have to provide a typing for props and use it like this.

interface IMenuListProps {
  options: IMenu[]
}

const MenuList = (props: IMenuListProps) => {
  return (
    <ul>
      {
        props.options.map((Option: IMenu) => (
          <li key="">
            <a href={Option.link}>{Option.name}</a>
            {/* Base Case */}
            {
              (Option.subitem && Option.subitem.length > 0) &&
              <MenuList options={Option.subitem} />
            }
          </li>
        ))
      }
    </ul>
  )
}

answered Dec 12, 2019 at 9:24

user2529173

1,9246 gold badges30 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

François Richard Over a year ago

just curious, would it work with destructuring ? const MenuList = ({ Options: IMenu[] }) => {

Milind Over a year ago

@FrançoisRichard No that too don't work :( ts error

user2529173 Over a year ago

@FrançoisRichard Yes you can, but if you're using Typescript you still have to provide a type.Something like this works const MenuList = ({options}: {options: IMenu[]}).

Monika · Accepted Answer · 2023-06-01 11:38:44Z

If you are declaring a component as (declare Component with its type Eg: React.FunctionComponent )

export const TestComponent: React.FunctionComponent = () => {}

Please note here, you are giving component type here. Now if you pass props to the component you will get "IntrinsicAttributes" Error. To solve this you need to pass the Props Type as well with the Component type as shown in the below example.

// Type of props to pass
export type TestComponentProps = {
    count?: number;
};

//Declare component
export const TestComponent: React.FunctionComponent<TestComponentProps> = 
({count}: TestComponentProps) => {
    console.log("count = ", count)
}

//Use that Component
<TestComponent count={15} />

Collectives™ on Stack Overflow

is not assignable to type 'IntrinsicAttributes (React.js and TypeScript.js)

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related