hossein-zare / react-native-dropdown-picker

A single / multiple, categorizable, customizable, localizable and searchable item picker (drop-down) component for react native which supports both Android & iOS.
https://hossein-zare.github.io/react-native-dropdown-picker-website/
MIT License
1k stars 297 forks source link

how i display category and subcategory wise #689

Open Pragnesh-Dharajiya opened 1 year ago

Pragnesh-Dharajiya commented 1 year ago

[ { "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

aliansyahFirdaus commented 1 year ago

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}
/>