react-native-dropdown-picker icon indicating copy to clipboard operation
react-native-dropdown-picker copied to clipboard

how i display category and subcategory wise

Open Pragnesh-Dharajiya opened this issue 2 years ago • 1 comments

[ { "id": 6, "name": "Favorite Foods", "SubCategory": [ { "id": 10, "name": "Cheese Burger" }, { "id": 11, "name": "Cornbread" }, { "id": 12, "name": "Grilled cheese" }, { "id": 13, "name": "Hot dog" }, { "id": 14, "name": "Barbecue" }, { "id": 16, "name": "Peanut Butter and Jelly" }, { "id": 17, "name": "Biscuits and Gravy" } ] }, { "id": 7, "name": "Favorite Hobby", "SubCategory": [ { "id": 18, "name": "Singing" }, { "id": 19, "name": "Photography" }, { "id": 20, "name": "Planting" }, { "id": 21, "name": "Gaming" }, { "id": 23, "name": "Pottery" }, { "id": 24, "name": "Painting" }, { "id": 25, "name": "Golf" }, { "id": 26, "name": "Kayaking" } ] } ] Example: parent name will be Favorite Foods inside display subcategory of favourite foods with multiple selections

Pragnesh-Dharajiya avatar Aug 19 '23 10:08 Pragnesh-Dharajiya

hi @Pragnesh-Dharajiya, let me help

you should format the data like this

[
    {
        "id": 7,
        "name": "Favorite Hobby"
    },
    {
        "id": 18,
        "name": "Singing",
        "parent": "7"
    },
    {
        "id": 19,
        "name": "Photography",
        "parent": "7"
    },
    {
        "id": 20,
        "name": "Planting",
        "parent": "7"
    },
    {
        "id": 21,
        "name": "Gaming",
        "parent": "7"
    }
]

use key parent depending on which data you want to make parent

and don't forget to create a different impression between parent and child, change the styling between parent and child

<DropDownPicker
  // rest your props
  
  listChildContainerStyle={{ paddingLeft: 24 }}
  listItemContainerStyle={{ backgroundColor: 'red' }}
  
  // add this if you want to disable parent select
  categorySelectable={false}
/>

aliansyahFirdaus avatar Sep 06 '23 04:09 aliansyahFirdaus