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

Question

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

Answer 1

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.