map into an array of object

I’ve got that object :

foodDatas: {
  "_id": "603cf063c9f3a13528634bab",
  "description": "petit déjeuner parisien local sur l'ile",
  "hotel": "603cd6ae5206ad4f04296218",
  "nameArticle": "Parisien",
  "prix": 15,
  "type": "PetitDejeuner",
  "detail": [
    { "pastries": ["croissant","pain au chocolat"] },
    { "drinks": ["café","thé"] },
    { "fromages": ["kiri", "camembert"] },
  ],
  
}

What I want to do is to map through detail array to display each element of the value of the objects that contains each of its elements.

In others terms, I want to make a list like below

pastries:

  • croissant
  • pain au chocolat

drinks:

  • café
  • thé

fromages:

  • kiri
  • camemebert

I’ve tried this :

                    {Object.keys(foodDatas.detail).map((category, i) => {
                      
                      return (
                        <>
                        <Text style={styles.category}>{category}</Text>
                        
// From here I want to map through category to display its content** 

                        <View style={styles.choices}>
                          <View style={styles.options}>
                            <TextInput
                              style={styles.input}
                              onChangeText={handleChange("croissant")}
                              placeholder={"1"}
                              keyboardType={'numeric'}
                              value={values.croissant}
         
                            />
                         
                            <Text style={styles.itemOption}>Croissant</Text>
                          </View>
                          </View>
                        </>
                      )
                    })}

But I didn’t get the name of the categories (pastries, fromages, etc.), instead I’ve got their index (0,1, etc.). Also, I don’t know how to retrieve the value of each category ( croissant, pain au chocolat, café, etc.)

Thank for any help you can give

Answer

To first address why you’re getting the index, it’s because you’re using Object.keys() on an array (foodDatas.detail is an array not an object).

To get your current implementation working, you’ll need to do something like:

return foodDatas.detail.map((categoryObj) => (
    Object.keys(categoryObj).map((category) => (
        <>
            <Text style={styles.category}>{category}</Text>
            {categoryObj[category].map((entry) => (
                <View style={styles.choices}>
                    <View style={styles.options}>
                        <TextInput
                          style={styles.input}
                          onChangeText={handleChange(entry)}
                          placeholder={"1"}
                          keyboardType={'numeric'}
                          value={entry}
                        />
                        <Text style={styles.itemOption}>{entry}</Text>
                    </View>
                </View>
            ))}
        </>
    
    ));
));

Leave a Reply

Your email address will not be published. Required fields are marked *