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

Answer 1

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} />

Answer 2

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>
  )
}