setting the boolean value of aria expansion using react hooks

In Ant Design, they have provided a bunch of props with very simple names to get our things done in a very friendly manner.

You can decide the initial openness/closeness of your Select element using defaultOpen prop and, always one-to-one bound openness/closeness using open prop.

Here you want to control the open/close action in always one-to-one bound manner I guess. So your code should be like this!

const [selectAria, setSelectAria] = useState(false);

    <Select
      name="someName"
      id="someID"
      onSelect={(value) => handleChangeSelect(value)}
      open={selectArea}
    >

*Note: Removed your aria-label attribute as well. Refer official AntD documentation for a suitable prop API – Select Component!

**Note: If you use this open prop I mentioned above, it may never allow you to close the panel until your selectAria variable is true. So you have to carefully handle that situation as well!

***Note: This answer is referred to Ant Design version 4.7.3. Select the correct version of documentation before you refer!

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top