How to add values dynamically in DropDownPicker dynamically React Native

Question

In DropDownPicker I am trying to add map dynamically which's failing in syntax. Need help with the syntax as it looks logically correct to me. I was able to find loop example for Picker but not for DropDownPicker

<View>
<DropDownPicker
          items={[
            mealItems.map((option) =>(
             {
              label: {option.name}, // Getting error here
              value:{option.id},
              icon: () => (                  
                <View style={styles.arrowAdd}>
                  <FoodPlus />
                </View>
              ),
            }, //Getting error here to remove the comma but that's required 
            )
            )
          ]
          }
//Dropdown attributes such as  style etc
/>
      </View>

My response data that I am trying to loop looks like following:

[{"id": 1, "name": "Breakfast"}, {"id": 2, "name": "Morning Snack"}, {"id": 3, "name": "Lunch"}, {"id": 4, "name": "Evening Snack"}, {"id": 5, "name": "Dinner"}]

Teddy Sterne · Accepted Answer · 2020-08-26 15:35:47Z

1

You are mixing up where you need JSX syntax vs regular Javascript syntax. The biggest issue is with the map functions return value. You don't need {} around the values because there you should be using the JavaScript Object notation.

After fixing the issues it should look like this.

<View>
  <DropDownPicker
    items={mealItems.map((option) => ({
      label: option.name,
      value: option.id,
      icon: () => (
        <View style={styles.arrowAdd}>
          <FoodPlus />
        </View>
      ),
    }))}
  />
</View>

answered Aug 26, 2020 at 15:35

Teddy Sterne

14.3k2 gold badges49 silver badges52 bronze badges

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

4 Comments

Sakshi Over a year ago

Hi! It says name doesn't exist on type 'never' same with id

Teddy Sterne Over a year ago

@Sakshi are you using TypeScript?

Sakshi Over a year ago

Yes using tsx file type

Teddy Sterne Over a year ago

It looks like mealItems is not strongly typed so the compiler doesn't know what the type of option is. It then gives you a warning because it might not exist and could cause an error. Either strongly type the mealItems array so that the types of option can be inferred or mark option as an any type i.e. mealItems.map((option: any) => ({

Collectives™ on Stack Overflow

How to add values dynamically in DropDownPicker dynamically React Native

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related