So, I have a basic iterable Component Link that render some link. He is wrapped up in Links ponent that iterate him. Unfortunately, the problem that I faced is the Typescript does not understand what to do with key prop on Link ponent over Links Component iteration.

I'll gradeful for any help!

Error message:

Type '{ key: number; }' is not assignable to type 'ILink'.

Property 'title' is missing in type '{ key: number; }'.

My code:

import React from 'react'
import styles from './index.cssmodule.scss'

interface ILinks {
  links: object[]
}

interface ILink {
  title: string
  label: string
  href: string
  icon: string
}

// Link Component
const Link: React.SFC<ILink> = ({ title, label, href, icon }) => (
  <a href={href + label}>
    <i className={icon} />
    <span>{title}</span>
  </a>
)

// Links Component that wraps Link
const Links: React.SFC<ILinks> = ({ links = [] }) => {    
  const bulidLinksList = (): JSX.Element[] => (
    links.map((link, i) => (
      <Link key={i} {...link} /> // ERROR Type '{ key: number; }' is not assignable to type ILink
    ))
  )

  return (
    <div className={styles.linksContainer}>
      {bulidLinksList()}
    </div>
  )
}
   
export default Links

So, I have a basic iterable Component Link that render some link. He is wrapped up in Links ponent that iterate him. Unfortunately, the problem that I faced is the Typescript does not understand what to do with key prop on Link ponent over Links Component iteration.

I'll gradeful for any help!

Error message:

Type '{ key: number; }' is not assignable to type 'ILink'.

Property 'title' is missing in type '{ key: number; }'.

My code:

import React from 'react'
import styles from './index.cssmodule.scss'

interface ILinks {
  links: object[]
}

interface ILink {
  title: string
  label: string
  href: string
  icon: string
}

// Link Component
const Link: React.SFC<ILink> = ({ title, label, href, icon }) => (
  <a href={href + label}>
    <i className={icon} />
    <span>{title}</span>
  </a>
)

// Links Component that wraps Link
const Links: React.SFC<ILinks> = ({ links = [] }) => {    
  const bulidLinksList = (): JSX.Element[] => (
    links.map((link, i) => (
      <Link key={i} {...link} /> // ERROR Type '{ key: number; }' is not assignable to type ILink
    ))
  )

  return (
    <div className={styles.linksContainer}>
      {bulidLinksList()}
    </div>
  )
}
   
export default Links

• javascript
• reactjs
• typescript

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Oct 10, 2018 at 9:22 Max TravisMax Travis 1,32844 gold badges2222 silver badges4343 bronze badges 1

• emmm,React may think see the key as a property that should pass to Link.I once face a similar situation, maybe not a good way ,but I add a <div key={i}></div>. – Root Commented Oct 10, 2018 at 10:16

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Try using React.ReactElement instead of React.SFC, ReactElement will give you key and ref props

const Link: React.ReactElement<ILink> = ({ title, label, href, icon }) => (
  <a href={href + label}>
    <i className={icon} />
    <span>{title}</span>
  </a>
)

// Links Component that wraps Link
const Links: React.ReactElement<ILinks> = ({ links = [] }) => {    
  const bulidLinksList = (): JSX.Element[] => (
    links.map((link, i) => (
      <Link key={i} {...link} />
    ))
  )

  return (
    <div className={styles.linksContainer}>
      {bulidLinksList()}
    </div>
  )
}

You are defining an interface Link like that:

interface ILink {
  title: string
  label: string
  href: string
  icon: string
}

Then you try to assign key={i}, which ends up just being an object like

{
  key: 123;
}

You have not defined key in your ILink interface. That's why TypeScript plains.

The basic problem here is that on line your are not using ReactElement, but function functional interface React.SFC which will produce ReactElement. That fuction expects interface which you defined like this interface ILink { title: string label: string href: string icon: string }