reactjstypescriptreact-nativereact-usememo

How to use useMemo in this example?


I'm struggling with problem chaning const variable to const with useMemo. I tried some example from docs and some tutorials and nothing worked for me. This have to be easy...

const bottomSheetOptions: BottomSheetAction[] = [
    {
      label:
        t('kebabMenu.send') +
        (count > 1 ? t('kebabMenu.documents', { count }) : ''),
      icon: <SendIcon />,
      state: sendVisible,
      dismiss: () => showSendAlert(),
      onClick: () => showSendAlert(),
      alertType: 'sendInvoice',
      disabled: count > 0,
      visible: documentType === 'sales'
    },
    {
      label: t('kebabMenu.download'),
      icon: <DownloadIcon />,
      state: downloadVisible,
      dismiss: () => showDownloadDocumentsModal(),
      onClick: () => showDownloadDocumentsModal(),
      alertType: 'download',
      disabled: true,
      visible: true
    }
  ];

So i'm tried this but it gives me error

const bottomSheetOptions: BottomSheetAction[] = useMemo(() => [[
    {
      label:
        t('kebabMenu.send') +
        (count > 1 ? t('kebabMenu.documents', { count }) : ''),
      icon: <SendIcon />,
      state: sendVisible,
      dismiss: () => showSendAlert(),
      onClick: () => showSendAlert(),
      alertType: 'sendInvoice',
      disabled: count > 0,
      visible: documentType === 'sales'
    },
    {
      label: t('kebabMenu.download'),
      icon: <DownloadIcon />,
      state: downloadVisible,
      dismiss: () => showDownloadDocumentsModal(),
      onClick: () => showDownloadDocumentsModal(),
      alertType: 'download',
      disabled: true,
      visible: true
    }
  ]], [documentType, downloadVisible, sendVisible, showDownloadDocumentsModal, showSendAlert]) 

Error:

Type '{ label: string; icon: Element; state: boolean; dismiss: () => void; onClick: () => void; alertType: string; disabled: boolean; visible: boolean; }[][]' is not assignable to type 'BottomSheetAction[]'.
  Type '{ label: string; icon: Element; state: boolean; dismiss: () => void; onClick: () => void; alertType: string; disabled: boolean; visible: boolean; }[]' is missing the following properties from type 'BottomSheetAction': label, icon, state, dismiss, and 4 more.

---EDIT--- Adding type of array BottomSheetAction

export type BottomSheetAction = {
  label: string;
  icon: React.ReactNode;
  state: boolean;
  dismiss: () => void;
  onClick: () => void;
  alertType: 'download' | 'sendInvoice';
  disabled: boolean;
  visible: boolean;
};

Solution

  • In your "useMemo" attempt you are returning an array in an array. I don't have the BottomSheetAction type, but try replacing the outer square bracket with round ones, i.e.:

    const bottomSheetOptions: BottomSheetAction[] = useMemo(() => [
        {
          label:
            t('kebabMenu.send') +
            (count > 1 ? t('kebabMenu.documents', { count }) : ''),
          icon: <SendIcon />,
          state: sendVisible,
          dismiss: () => showSendAlert(),
          onClick: () => showSendAlert(),
          alertType: 'sendInvoice',
          disabled: count > 0,
          visible: documentType === 'sales'
        },
        {
          label: t('kebabMenu.download'),
          icon: <DownloadIcon />,
          state: downloadVisible,
          dismiss: () => showDownloadDocumentsModal(),
          onClick: () => showDownloadDocumentsModal(),
          alertType: 'download',
          disabled: true,
          visible: true
        }
      ], [documentType, downloadVisible, sendVisible, showDownloadDocumentsModal, showSendAlert])