I'm getting the following error while trying to create a multimap with 'date' as the key and then iterate through the multimap which has arrays as it's values.
Type '{children: never[]; key: string; Index: string; Item: SomeItem[]; }' is not assignable to type 'IntrinsicAttributes & Props'. Property 'children' does not exist on type 'IntrinsicAttributes & Props'. ts(2322)
and not sure how to fix this
const History = () => {
const [counter, setCounter] = useState(0);
type SomeMap = Map<string, SomeItem[]>;
let map: SomeMap = new Map();
//Items is of type SomeItem[]
Items.foreach((item) =>{
if(map.has(item.date)){
(map.get(item.date) ?? []).push(item);
}
else{
map.set(item.date,[item]);
}
});
return(
<Accordian>
{ map.foreach((value, index) => {
setCounter(counter +1 );
<Task
key={index}
Index={counter.toString()}
Item={value}>
</Task>
})}
</Accordian>
);
};
type Props = {
index: string;
Item: SomeItem[];
};
const Task = (props:Props) => {
const index = props.Index;
const Item = props.SomeItem;
render(/*Some Code*/);
};
Task is not typed to receive children, but actually you are actually passing a newline text node as the task's children.
<Task
key={index}
Index={counter.toString()}
Item={value}>{/* there is a new line text node here */}
</Task>
You probably want to make the JSX tag self closing to ensure it has no children:
<Task
key={index}
Index={counter.toString()}
Item={value}
/>