What is the best approach to creating multiple dropdowns in ant-design with unique options for each?

Question

What is the best approach to creating multiple dropdowns in ant-design with unique options for each?

It seems like I may be overlooking a simple solution here. Ant-Design dropdowns utilize an array of ItemProp objects to show the options, but this restricts me to having only one list of options.

  const choices: MenuProps['items'] = [
{
  label: 'X',
  key: '4',
},
{
  label: 'Y',
  key: '5',
},
{
  label: 'Z',
  key: '6',
},];

However, this raises the question - how can I have multiple dropdowns on the same page? The documentation conveniently avoids addressing this issue altogether. Creating another constant variable with a different name doesn't seem to work since the Dropdown API specifically expects an array of ItemProp objects named 'items', as shown below.

<Dropdown menu={{ items}} placement="bottom" >
        <Button>
          Selection
        </Button>

This leaves me unsure of how to create a new const array of ItemProp objects for additional dropdowns. Any assistance would be greatly appreciated.

typescript antd

Answer 1

Answer №1

It is not necessary to assign the name 'items' to your array. Feel free to give your array any name you prefer, such as 'options'. Once you have done that, you can use it like this:

<Dropdown menu={{ items: options }} placement="bottom"gt;
    <Button>
      Category
    </Button>
</Dropdown>

Answer 2

It is not necessary to assign the name 'items' to your array. Feel free to give your array any name you prefer, such as 'options'. Once you have done that, you can use it like this:

<Dropdown menu={{ items: options }} placement="bottom"gt;
    <Button>
      Category
    </Button>
</Dropdown>

What is the best approach to creating multiple dropdowns in ant-design with unique options for each?

Answer №1

Similar questions

Create a conditional statement based on the properties of an object

Implement Material-UI's built-in validation for form submission

Adjusting the array when items in the multi-select dropdown are changed (selected or unselected)

Tips for accessing touch events within the parent component's area in React Native

Is there a way to efficiently convert several strings within an object that has been retrieved from an HTTP request into another language, and subsequently save this object with the

Issue encountered while using Typescript with mocha: Unable to utilize import statement outside a module

Just a straightforward Minimum Working Example, encountering a TypeScript error TS2322 that states the object is not compatible with the type 'IntrinsicAttributes & Props & { children?: ReactNode; }'

What is the process of incorporating a JavaScript node module into TypeScript?

Error when compiling with Component Lab's Autocomplete function for SVG Icons in Material UI

Is there a substitute for useState in a Next.js server component?

Authentic property does not reveal its contents

Model Mongoose TypeScript Interface Type

The observable did not trigger the next() callback

Setting up SSL/TLS certificates with Axios and Nest JS

What exactly does "tsc" stand for when I compile TypeScript using the command "(tsc greeter.ts)"?

Apache ECharts is throwing an error due to incompatible types of the 'trigger' property

Having difficulty choosing a default value from the Angular dropdown menu

How to reveal hidden Div element at a specific index with Angular Material table

Typescript's way of mocking fetch for testing purposes

Angular displays [object Object] upon return