Blend the tagRender and tags functionality of Kendo React Multiselect

Environment

Description

I want to use both the tagRender and tags functionalities together in the MultiSelect component.

Solution

The below example demonstrates this approach where the tags property is used to display the number of selected items, while the tagRender property is used to customize the item tags to show icons instead of text.

The tags are stored in the tags state variable where the first one stores the count of the selected items. When new items are added, in the handleChange event handler, they are pushed to the tags state variable. On the other had, when an item is removed by clicking on the item from the popup again, they are removed from the tags state variable using the filter method. In addition, the tagRender event handler renders a font icon depending in the tagData.text value.