Nested dropdown in react-select

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.

TheFunk · Accepted Answer · 2020-09-16 13:27:07Z

2

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.

edited Sep 16, 2020 at 13:27

answered Sep 16, 2020 at 13:19

TheFunk

1,1283 gold badges19 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nested dropdown in react-select

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related