CODEWITHSUNDEEP
reactjstypescript
Arth
Arth

Reputation: 99

Typescript provides error on react key property - Property 'key' does not exist on type

The following code gives me the error TS2322: Type '{ key: string; item: string; }' is not assignable to type '{ item: any; }'.   Property 'key' does not exist on type '{ item: any; }'.

function Foo() {
    const myThings = ["hi", "bye"]
    return myThings.map((thing) => {
        return <Bar key={thing} item={thing} />
    })
}
function Bar({item}) {
    return <div>{item}</div>
}

How do I tell typescript that key is a property expected by react?

I'm using create-react-app and "jsx": "react-jsx", is the jsx setting in my tsconfig

Upvotes: 0

Views: 3605

Answers (2)

Pacholoamit
Pacholoamit

Reputation: 265

Maybe do something like this

const Foo = () => {
    const myThings = ["hi", "bye"]
    return myThings.map((thing) => {
        return <Bar key={thing} item={thing} />
    })
}

interface BarProps {
  key: string
  item: string
}

const Bar: React.FC<BarProps> = ({key, item}) => {
    return <div>{item}</div>
}

Upvotes: 0

Arth
Arth

Reputation: 99

I did not have @types/react installed which caused WebStorm to give me the error.

Run npm i -D @types/react.

Upvotes: 4

Related Questions