反应选择中的嵌套下拉列表

Question

I am using react-select to render the dropdown. The options to render the dropdown looks like this

 [
    {   
        text:'Fruit',
        value:'mango'
        level: 0
    },
    {   
        text:'Seasonal',
        slug: 'saasonal',
        level: 1
    },
    {   
        text:'Orange',
        slug: 'orange',
        level: 2
    },
    {   
        text:'Mango',
        slug: 'mango',
        level: 2
    },
    {
        text: 'Winter',
        slug:'winter',
        level:1
    },
    {
        text: 'Plum',
        slug:'plum',
        level:2
    }

]

I would like the dropdown to be like

Fruit   
    Seasonal
        Orange
        Mango
    Winter
        Plum

I have tried adding a group to the react-select, but then the group heading is not clickable. I have also referred to the stackoverflow link

[https://stackoverflow.com/questions/53119912/how-can-i-create-nested-option-groups-in-react-select-v2][1]
and tried creating a recursive dropdown in the same manner it is posted on the link above by passing my options as the data but was not successful.

The order of the within nested dropdown is based on the level.

Answer 1

react-select actually just got this feature builtin in July.

Here's the pull request where they implemented it.

Here's a working example from the pull request page.

I'm not sure if it has made its way into the master branch yet or not but you can always pull from the version listed in the package.json file in the sample above if the sample code doesn't work with the version you're using.

EDIT: Scratch that, you want group headings to be clickable. I don't think that was part of this commit.