Use multiple visible states as array

[mleister97]

I don't want to create seperate setState() for each dropdown. I am using an Array/Reducer with 20 open/close states for the dropdown (I am currently migrating from V3). How can I use multiple states at once? Example:

interface ISearchFormDropDownsVisible {
    [fieldName: string]: boolean
}

const [visibleStates, setVisibleStates] = useState<ISearchFormDropDownsVisible>([])

Recently I wrote wrapper functions for opening and closing and setting the corresponding dropdown visible state like this:

    // Only 1 can be open at the same time
    const onOpenHandler = useCallback((itemName: string) => {
        setSearchFormDropDownsVisible((prev) => {
            let allFalse: ISearchFormDropDownsVisible = {}
            Object.keys(prev).forEach((key) => {
                allFalse[key] = false
            })
            return {...allFalse, [itemName]: true}
        })
    }, [])

[mleister97]

Figured it out, working (simplified solution) using TS:

const [open, mySetOpen] = useState(false);
const [value, mySetValue] = useState<string>("apple");
const [items, mySetItems] = useState([
    {label: 'Apple', value: 'apple'},
    {label: 'Banana', value: 'banana'}
]);

type SetStateCallback<S> = ((prevState: S) => S);
type SetStateValue<S> = ((prevState: S) => S);

const setOpen = (open: SetStateValue<boolean>) => {
  mySetOpen(open)
}

const setValue = (callback: SetStateCallback<string>) => {
  mySetValue(callback)
}

const setItems = (callback: SetStateCallback<IDropDownItem[]>) => {
  mySetItems(callback)
}

<DropDownPicker
  open={open}
  value={value}
  items={items}
  setOpen={setOpen}
  setValue={setValue}
  setItems={setItems}
/>