How to show the modal dialog based on label type

I'm trying to show a open modal dialog based on the label click, but it is showing the same(All Recommendations) modal dialog even if i clicked on other label(Entities By type) . How to handle this , please help me thanks in advance

const ExportTypes: Array<{ label: string; id: string }> = [
 { label: 'All Recommendations', id: 'AllRecommendations' },
 { label: 'Entities By type', id: 'EntitiesBytype' },  
];

const handleModalExport = useCallback(
() => {
  if (ExportTypes.some(e => e.id === 'AllRecommendations')) {
      openModalDialog({
        title: t('Export all recommendations'),
        renderContent: () => <RecommendationExportModel />,
      });
    }
   else if(ExportTypes.some(e => e.id === 'EntitiesBytype')) { 
      openModalDialog({
        title: t('Export all'),
        renderContent: () => <RecommendationExportEntitiesModel />,
      });
    }
  },
 [openModalDialog, t],
);

{ExportTypes.map((objType) => (
  <MenuItem key={objType.id} onClick={handleModalExport}>
     {t(objType.label)}
  </MenuItem>
))}

> The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false. It doesn't modify the array.

In this case, when you run handleModalExport(), it's checking your ExportTypes constant for if it has an item with an id equal to AllRecommendations. Since it always has that, anytime you click the MenuItem, it will always pass the first conditional since that item id is always present in your constant.

You're basically not using the clicked item's id which is the problem. Your MenuItem needs to pass in the id that you are clicking and that you want to do a check on.

Try using this instead:

<MenuItem key={objType.id} onClick={() => handleModalExport(objType.id})}>

Then update your callback to use this dynamic id from your onClick event:

const handleModalExport = useCallback(
(id) => {
  switch (id) {
    case 'AllRecommendations':
      openModalDialog({
          title: t('Export all recommendations'),
          renderContent: () => <RecommendationExportModel />,
        });
      }
    break;
    case 'EntitiesBytype':
      openModalDialog({
        title: t('Export all'),
        renderContent: () => <RecommendationExportEntitiesModel />,
      });
    break;
    default:
      // handle this, throw? do nothing?
  },
 [openModalDialog, t],
);