I recently converted an arrow function destructure to Typescript, but I am struggling to understand the last item: icon: Icon. It seems that Icon is not imported or declared anywhere in the code.
Here is the original JavaScript:
const NavbarDropdown = ({
children,
count,
showBadge,
header,
footer,
icon: Icon
}) => (
<UncontrolledDropdown nav inNavbar className="mr-2">
<DropdownToggle nav className="nav-icon dropdown-toggle">
<div className="position-relative">
<Icon className="align-middle" size={18} />
I attempted to convert it to TypeScript, but encountered an error with {icon: Icon} since Icon was not imported or declared aside from within the function itself:
const NavbarDropdown = (
{children} : {children: string},
{count} : {count: number},
{showBadge} : {showBadge: boolean},
{header} : { header: string},
{footer} : { footer: string},
{icon: Icon},
) => (
<UncontrolledDropdown nav inNavbar className="mr-2">
<DropdownToggle nav className="nav-icon dropdown-toggle">
<div className="position-relative">
<Icon className="align-middle" size={18} />
Update: Despite understanding the discussion around Icon/icon, I still couldn't locate where Icon is imported or declared. Here's a snippet of the NavbarDropdown call:
<Collapse navbar>
<Nav className="ml-auto" navbar>
<NavbarDropdown
header="New Messages"
footer="Show all messages"
icon={MessageCircle}
count={messages.length}
showBadge
>
{messages.map((item, key) => {
return (
<NavbarDropdownItem
key={key}
icon={
<img
className="avatar img-fluid rounded-circle"
src={item.avatar}
alt={item.name}
/>
}
title={item.name}
description={item.description}
time={item.time}
spacing
/>
);
})}
</NavbarDropdown>