I can't get my typescript interface to work with a react tsx component. I've got all the items inside an array of objects with possible sub items.
I've tried lots of different interfaces but always ended up with some kind of error, currently only the map function seems to not work with the interface. (I'm a noob and started using typescript yesterday for the first time :P)
interface NavListItem {
ID: string;
title: string;
path_url: string;
child_items?: NavListProps;
}
interface NavListProps {
items: { [index: number]: NavListItem };
}
const NavList: React.FC<NavListProps> = ({ items }) => {
return items.map(item => (
<li key={item.ID}>
<Link to={item.path_url}>{item.title}</Link>
{item.child_items ? (
<ul>{<NavList items={item.child_items} />}</ul>
) : null}
</li>
));
};
My goal is to have no errors and a working component. I appreciate all the help!