Type 'Element[]' is missing the following properties from type 'Element': type, props, key

user_4791116 0
Viewed 82608

I have the standard arrow map ES7 function with Typescript and React environment:

 const getItemList: Function = (groups: any[]): JSX.Element => 
  group.map((item: any, i: number) => {
    const itemCardElemProps = { handleEvents: () => {}, ...item}
    return <Item key={`${item.id}_${i}`} {...itemCardElemProps} />
  })

and get the error:

TS2739: Type 'Element[]' is missing the following properties from type 'Element': type, props, key

Version: typescript 3.5.3

typescript reactjs
6 Answers

You could always just send back a single JSX.Element as a fragment, too:

interface IOptions {
   options: string[]
}

const CardArray: React.FC<IOptions> = ({ options }) => {
   return <>{options.map(opt => opt)}</>
}

This way you're matching the returned type and it won't affect your markup.

user_7444980

To fix the error, it is necessary to change type of the function output from JSX.Element to React.ReactElement[] or JSX.Element[] like this:

 const getItemList: Function = (groups: any[]): React.ReactElement[] => 
  groups.map((item: any, i: number) => {
    const itemCardElemProps = { key: item.id, handleEvents: () => {}, ...item}
    return <Item {...itemCardElemProps} />
  })

or you can rewrite it in the interface style:

interface IGetItemList {
  (groups: any[]): React.ReactElement[] // or JSX.Element[]
}

const getItemList: IGetItemList = groups =>
  groups.map((item: any, i: number) => {
    const itemCardElemProps = { key: item.id, handleEvents: () => {}, ...item }
    return <Item {...itemCardElemProps} />
  })
user_47911160

@Roman They must have changed something, this doesn't work for me

code:

const CardArray = (props: Items): JSX.Element[] => {
    return props.items.map((item) => <Item data={item} />);
};

export default CardArray;

error:

JSX element type 'Element[]' is not a constructor function for JSX elements.
Type 'Element[]' is missing the following properties from type 'Element': type, props, key

edit: nevermind, I just had to add the function type, to the function... kind of stupid if you ask me.

what worked me:

const CardArray: Function = (props: Items): JSX.Element[] => {
    return props.items.map((item) => <Item data={item} />);
};
user_127884520

I was getting the error because of I am inheriting JSX.Element but I was using the .ts file extension. when I use the .tsx file extension my problem resolve.

enter image description here

user_10773460

I had an issue related to this error that may happen to other people. I'm new to TS and had the bad habit of using [ and ] to open and close the return JSX. As I just discovered TS doesn't allow it. So they should be replaced by ( )

enter image description here

user_148959850

You need to change the type of the function output from JSX.Element to ReactNode[] like this:

import { ReactNode } from 'react'

const getItemList: Function = (groups: any[]): ReactNode[] => 
    groups.map((item: any, i: number) => {
    const itemCardElemProps = { key: item.id, handleEvents: () => {}, 
     ...item}
    return <Item {...itemCardElemProps} />
})
user_87301400
Related