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

• 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

3 Answers 3

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 }