将本机数组反应到节列表

Question

I'm trying to format some data into a SectionList on my react native app, but I'm running into some issues with getting it working. Essentially, I have a list of ingredients that are connected to their recipeId and some other information. I'm using lodash to sort the data into arrays based on the recipeName and the results look like this:

Object {
  "Blueberry Chaffles": Array [
    Object {
      "ingredient": "1/2 Cup Mozzarella Cheese (shredded and chopped into bits)",
      "recipeId": 749,
      "recipeName": "Blueberry Chaffles",
      "uniqueId": "7491/2 Cup Mozzarella Cheese (shredded and chopped into bits)",
    },
  ],
  "Everything Chaffle with Cream Cheese and Salmon": Array [
    Object {
      "ingredient": "CHAFFLES",
      "recipeId": 750,
      "recipeName": "Everything Chaffle with Cream Cheese and Salmon",
      "uniqueId": "750CHAFFLES",
    },
    Object {
      "ingredient": "1 Egg",
      "recipeId": 750,
      "recipeName": "Everything Chaffle with Cream Cheese and Salmon",
      "uniqueId": "7501 Egg",
    },
    Object {
      "ingredient": "2 Tsp Everything Bagel Seasoning",
      "recipeId": 750,
      "recipeName": "Everything Chaffle with Cream Cheese and Salmon",
      "uniqueId": "7502 Tsp Everything Bagel Seasoning",
    },
    Object {
      "ingredient": "REMAINING INGREDIENTS",
      "recipeId": 750,
      "recipeName": "Everything Chaffle with Cream Cheese and Salmon",
      "uniqueId": "750REMAINING INGREDIENTS",
    },
    Object {
      "ingredient": "2 Oz Smoked Salmon",
      "recipeId": 750,
      "recipeName": "Everything Chaffle with Cream Cheese and Salmon",
      "uniqueId": "7502 Oz Smoked Salmon",
    },
  ],
}

which is the lodash output of:

let array = _.groupBy(recipesFav, o => o.recipeName)

The issue I'm running into now is trying to display this data in a sectionList. I've followed the documentation on the react website, but nothing seems to work. Essentially I want to be able to display the Recipe Name as a sectionlist heading and display the ingredients that correspond to this recipe underneath it. Any help would be greatly appreciated!

Edit: Current SectionList code that is not working:

<SectionList
                    sections={this.state.shopping_list}
                    keyExtractor={(item, index) => item + index}
                    renderItem={({ item }) => <Item title={recipeName} />}
                    renderSectionHeader={({ section: { recipeName } }) => (
                        <Text>{recipeName}</Text>
                    )}
                />

Answer 1

Each section should be organized as key value pairs in an array, such as

Data = [
{
    Title: "Blueberry Chaffles",
    Info: [
        {
            "ingredient": "1/2 Cup Mozzarella Cheese (shredded and chopped into bits)",
            "recipeId": 749,
            "recipeName": "Blueberry Chaffles",
            "uniqueId": "7491/2 Cup Mozzarella Cheese (shredded and chopped into bits)",
        },
    ]
},
{
    Title: "Everything Chaffle with Cream Cheese and Salmon",
    Info: [
        {
            "ingredient": "CHAFFLES",
            "recipeId": 750,
            "recipeName": "Everything Chaffle with Cream Cheese and Salmon",
            "uniqueId": "750CHAFFLES",
        },
        {
            "ingredient": "1 Egg",
            "recipeId": 750,
            "recipeName": "Everything Chaffle with Cream Cheese and Salmon",
            "uniqueId": "7501 Egg",
        },
        {
            "ingredient": "2 Tsp Everything Bagel Seasoning",
            "recipeId": 750,
            "recipeName": "Everything Chaffle with Cream Cheese and Salmon",
            "uniqueId": "7502 Tsp Everything Bagel Seasoning",
        },
        {
            "ingredient": "REMAINING INGREDIENTS",
            "recipeId": 750,
            "recipeName": "Everything Chaffle with Cream Cheese and Salmon",
            "uniqueId": "750REMAINING INGREDIENTS",
        },
        {
            "ingredient": "2 Oz Smoked Salmon",
            "recipeId": 750,
            "recipeName": "Everything Chaffle with Cream Cheese and Salmon",
            "uniqueId": "7502 Oz Smoked Salmon",
        },
    ],
}

];

Answer 2

you can try this.

// Object.keys is used to iterate over object keys with this you can form an array.

const section_list_data = Object.keys(response_object).map(key => ({ title: key, data: response_object[key] }));