Work Link - sidebar search
Requirement:
I need a searchbar in sidebar-top. But the special thing i need is on search it should start filtering and showing the matching menu items.
I tried it but menuitem is not changing instantaniusly as i type some key in search field.
It would be a great help.
Thanks
Do it Like this:
const [searchTerm, setSearchTerm] = useState('')
const menuItems = [
{name: 'Home', icon: FiHome, active: true},
{name: 'Category', icon: FaList, active: false},
{name: 'Favourite', icon: FaRegHeart, active: false},
{name: 'Author', icon: RiPencilLine, active: false},
{name: 'Settings', icon: BiCog, active: false},
]
<SidebarContent>
<Menu iconShape="square">
<input type="search" placeholder="search menu items.." onChange={(e) => setSearchTerm(e.target.value)} />
{menuItems.filter( item =>item.name.startsWith(searchTerm)).map({name, icon:Icon, active} => (
<MenuItem active={active} icon={<Icon/>}>
{name}
</MenuItem>
)
</Menu>
</SidebarContent>