我可以在反应中实现边栏项目的搜索选项吗？

Question

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

Answer 1

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>