MultiSelect - How to allow the user to add more items?

[eliezra236]

Hi,
I am using MultiSelect for tags, and I want to allow my user to specify tags that were not originally in the data input.

Is there an easy way to do it?

[eliezra236]

I managed to do so with useMemo

const defaultTags = ['one', 'two', 'three'];
const defaultTagsSet = new Set(defaultTags);

function TagsSelect() {
    const [selected, setSelected] = useState<string[]>([]);
    const [searchedText, setSearchedText] = useState<string>('');

    const availableTags = useMemo(() => {
        const tags = defaultTags.map((tag) => ({ value: tag }));
        for (const item of selected) {
            if (!defaultTagsSet.has(item)) {
                tags.push({ value: item });
            }
        }
        if (
            searchedText.length >= 2 &&
            !tags.find((tag) => tag.value === searchedText)
        ) {
            tags.push({ value: searchedText });
        }
        return tags;
    }, [searchedText, selected]);

    return (
        <View>
            <MultiSelect
                style={styles.dropdown}
                placeholderStyle={styles.placeholderStyle}
                selectedTextStyle={styles.selectedTextStyle}
                inputSearchStyle={styles.inputSearchStyle}
                iconStyle={styles.iconStyle}
                search
                onChangeText={setSearchedText}
                data={availableTags}
                labelField="value"
                valueField="value"
                placeholder="Select item"
                searchPlaceholder="Search..."
                value={selected}
                onChange={(item) => {
                    setSelected(item);
                }}
                maxSelect={5}
                renderLeftIcon={() => (
                    <AntDesign
                        style={styles.icon}
                        color="black"
                        name="safety"
                        size={20}
                    />
                )}
                selectedStyle={styles.selectedStyle}
            />
  <View />
);
}