JSX element type 'Element[]' is not a constructor function for JSX elements

[oonsamyi]

TypeScript Version: 3.5.1

Search Terms:

• JSX element type 'Element[]' is not a constructor function for JSX elements

• array jsx elements aren't support

Code

const Component = () => ['item1', 'item2'].map((item) => <div>{item}</div>)
const Container = () => <Component />

Expected behavior:
Should be no errors. It is valid behavior. Flow support this behavior.

Actual behavior:
Typescript throw 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

Playground Link:
https://www.typescriptlang.org/play/index.html?jsx=2#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQFA24QB2q8AwiZI1o-ALxwAKAJRxeAPjgBtMsBhYQARjIAacrPkAmMgF0AdCGRgBA9SBHi4AHgAmwAG5iA3qYC+lgPS2HQug2ZsmGGRgLihRQXMJS3ZwJm54dzEgA

[oonsamyi]

This is the issue of DefinitelyTyped: DefinitelyTyped/DefinitelyTyped#20356

[ofhope]

If you wrap your mapped list in a fragment its valid.

const SuggestionList = (props: { suggestions: string[] }) => {
    const { suggestions } = props;
    const suggestionList = suggestions.map((suggest, i) => (<p key={`suggest-${i}`}>{suggest}</p>));
    return (<>{suggestionList}</>);
}

I had the same error while returning an array of elements. Including return (<>{suggestionList}</>); solved the problem. A component can only one container Element.

[MujunZ]

If you wrap your mapped list in a fragment its valid.

const SuggestionList = (props: { suggestions: string[] }) => {
    const { suggestions } = props;
    const suggestionList = suggestions.map((suggest, i) => (<p key={`suggest-${i}`}>{suggest}</p>));
    return (<>{suggestionList}</>);
}

I had the same error while returning an array of elements. Including return (<>{suggestionList}</>); solved the problem. A component can only one container Element.

Thank you! This helped me.