My current type definition looks like this:
type MapItems = {
id: string,
title: string,
description: string,
category: string,
image: string
}
Below is my mapping function:
{itemData.map((item: MapItems) => {
return (
<Container key={item.id} className="flex-col mb-5 px-6 py-4">
<p>{item.title}</p>
<p className="mt-1">{item.description}</p>
<p className="mt-1">{item.category}</p>
<p className="mt-1"><img src={item.image} alt={item.title}/></p>
</Container>
)
})}
A TypeScript error I'm encountering reads as follows:
The argument of type '(item: MapItems) => JSX.Element' is not assignable to a parameter of type '(value: {}, index: number, array: {}[]) => Element'.
The types for parameters 'item' and 'value' are incompatible.
Type '{}' is missing properties such as id, title, description, and others defined in type 'MapItems'.
How can I tweak the map function to resolve the TypeScript error while keeping its functionality intact?