CODEWITHSUNDEEP
javascriptreactjstypescriptjsxtypescript-eslint
Saahir Foux
Saahir Foux

Reputation: 674

React TypeScript Error : TS2322 - Type '' is not assignable to type 'IntrinsicAttributes & String'

I have a new .tsx file, and I wish pass the title to my component. However, the property "title" returns the following error with the simple code below.

Type '{ title: string; }' is not assignable to type 'IntrinsicAttributes & String'. Property 'title' does not exist on type 'IntrinsicAttributes & String'. TS2322

import React from 'react';
import { render } from 'react-dom';
import { Nav } from "./sections";

render(
  <Nav title="Suite" />,
  document.getElementById('root')
);

The code for my Nav component is as follows:

import React from "react";

export const Nav = (title: String) => {
  return <ul><li>{title}</li></ul>;
};

I'm troubleshooting still, and I'm wondering if the fix is related to my TSConfig somehow. Any advice would be welcomed.

In case this helps, here is a copy of my tsconfig.json

    {
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

Upvotes: 0

Views: 4903

Answers (1)

Shivang Gupta
Shivang Gupta

Reputation: 3329

If your Nav component is functional component then you can pass the Type to it like below:

const Nav: React.FC<React.HTMLProps<Element>> = (props => {---your component code---})

Upvotes: 1

Related Questions