Steps to display a modal dialog depending on the category of the label

Question

Steps to display a modal dialog depending on the category of the label

I'm encountering an issue where clicking on different labels should show corresponding modal dialogs, but it always displays the same modal dialog for both labels ("All Recommendations"). Can anyone offer guidance on how to resolve this problem? Thank you 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>
))}

typescript

Answer 1

Answer №1

The some() method evaluates whether at least one element in the array satisfies the condition specified by the provided function. It returns true if any element in the array meets the condition set by the function; otherwise, it returns false. The original array remains unchanged.

In this scenario, when you execute the handleModalExport() function, it is verifying the presence of an item with an id matching AllRecommendations within your ExportTypes constant. Since that specific item is always present, clicking on the MenuItem will consistently trigger the first conditional statement due to the fixed nature of the item id in your constant.

The main issue lies in not utilizing the id of the clicked item. To resolve this, ensure that the MenuItem passes the respective id of the clicked item for validation purposes.

You can rectify this by implementing the following:

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

Subsequently, update your callback function to utilize the dynamically passed id from the 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],
);

Answer 2

The some() method evaluates whether at least one element in the array satisfies the condition specified by the provided function. It returns true if any element in the array meets the condition set by the function; otherwise, it returns false. The original array remains unchanged.

In this scenario, when you execute the handleModalExport() function, it is verifying the presence of an item with an id matching AllRecommendations within your ExportTypes constant. Since that specific item is always present, clicking on the MenuItem will consistently trigger the first conditional statement due to the fixed nature of the item id in your constant.

The main issue lies in not utilizing the id of the clicked item. To resolve this, ensure that the MenuItem passes the respective id of the clicked item for validation purposes.

You can rectify this by implementing the following:

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

Subsequently, update your callback function to utilize the dynamically passed id from the 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],
);

Steps to display a modal dialog depending on the category of the label

Answer №1

Similar questions

Angular6 Observables used in API service with dynamic arguments

Angular Form customizable field

React-router-dom TypeScript error when defining the type of the prop parameter in the loader

What is the best way to format a text component so that the initial word in each sentence is bolded?

Tips for resolving the issue of dropdown menus not closing when clicking outside of them

Tips on updating TypeScript to a higher major version

"Encountering issues with importing Splitpanes while using VueJs and TypeScript combination

Starting a nested JSON structure with TypeScript and Angular 7

Using Angular 2: Applying a specific class to a single element with [ngClass]

A guide to implementing vue-i18n in Vue class components

Ensuring the safety of generic types in Typescript

What is the best way to limit the types of function parameters in TypeScript based on whether the parameter index is even or odd?

Implementing a global provider in Ionic 3

Refresh the content of an Angular modal with updated data each time the modal is launched

Discussing recursive types A <--> B with generics in TypeScript

Issue arising with data exchange between components using data service in Angular 5

Why does the Amazon DynamoDB scan trigger an error by making two HTTP requests to the server?

Using the keyof operator to determine the data type of a property within a TypeScript class

Rendering a component in React based on multiple conditions

I am experiencing issues with my Jest unit test case for Material UI's multi select component failing