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
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.
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} />
})
const getItemList as a function as described in this answer, that the JSX.Element warning persists even if I define the function output as JSX.Element[]
I used @Roman's approach but had to add the function return type also.
What worked me:
const CardArray: Function = (props: Items): JSX.Element[] => {
return props.items.map((item) => <Item data={item} />);
};
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.
I was getting the same error using this code:
let expensesContent = <p>No expenses found.</p>;
if (filteredExpenses.length > 0) {
expensesContent = filteredExpenses.map((expense) => (<ExpenseItem expense={expense} key={expense.id} />));
}
The fix was to change the first line to:
let expensesContent: JSX.Element[] = [(<p>No expenses found.</p>)];
For me I encountered this after downgrading from react19 to 18, my solution was:
specifically update @types/react dependency.
npm uninstall @types/react and npm install @types/reactAfter doing all this reopen the project in your text editor and the problem should be resolved
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 ( )
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} />
})
ReactNode is never used in this code