SectionList from Multiple Sets of Data

Question

I am attempting to create a SectionList with Sections as "Inventory" followed by "Ingredients" for each Inventory. I have created an array from two Realm Object Arrays based on whether the inventoryID in Realm Object "Ingredients" matches the recordID in Realm Object "Inventories." I tried my hand at a FlatList, but am leaning towards SectionList for purposes of creating sections. Basically, I want to be able to have corresponding ingredient items for each inventory. The array currently has 1 ingredient item for each inventory. I want to be able to add more ingredient items and have them display underneath each inventory, as in:

Inventory #1 (Section Heading)
ID,
Name,
Date

Ingredient (Section Heading)
Ingredient ID,
Ingredient Type
Ingredient Name


Inventory #2 (Section Heading)
ID,
Name,
Date

Ingredient (Section Heading)
Ingredient ID,
Ingredient Type
Ingredient Name

I basically need assistance on how to loop through the array to create such sections. Any help would be greatly appreciated. Thank you.

My initial code is as follows:

import * as React from 'react';
import {View, Text, SectionList} from "react-native";
import realm from '../schemas/InventoryDatabase';

let inventoryArray = [];
const inventories = Object.values(realm.objects('Inventories'));
inventories.map((inv) => {
  inventoryArray.push({recordID: inv.recordID, inventoryName: inv.inventoryName, date: inv.date});
  const ingredients = realm.objects('Ingredients').filtered('inventoryID == $0', inv.recordID);
  ingredients.map((ing) => {
    inventoryArray.push({ingredientID: ing.ingredientID, ingredientType: ing.ingredientType, ingredient: ing.ingredient});
  });
});

This is a console.log printout of inventoryArray:

[{"date": "Tue Feb 14 2023", "inventoryName": "Test 1", "recordID": 1}, {"ingredient": "Baking Powder", "ingredientID": 1, "ingredientType": "Misc"}, {"date": "Tue Feb 14 2023", "inventoryName": "Test 2", "recordID": 2}, {"ingredient": "White", "ingredientID": 2, "ingredientType": "Bread"}]

Answer 1

I was able to solve by using a FlatList of inventory Realm object array and map of Ingredient Realm object array instead. I filtered the Ingredient Realm object array with a condition to find which inventoryID matched the inventory recordID.

import * as React from 'react';
import {View, Text, FlatList} from "react-native";
import realm from '../schemas/InventoryDatabase';


var ingredients = Object.values(realm.objects('Ingredients'));

export default class ViewInventory extends React.Component {  
  constructor(props) {
    super(props);
    this.state = {
      FlatListItems: [],
    };      
    var inventories = Object.values(realm.objects('Inventories'));
    this.state = {
      FlatListItems: inventories,
    };    
  }
  ListViewItemSeparator = () => {
    return (
      <View style={{ height: 0.5, width: '100%', backgroundColor: '#000' }} />
    );
  };    
  render() {                                    
    return (
      <View>                
        <FlatList
          data={this.state.FlatListItems}
          ItemSeparatorComponent={this.ListViewItemSeparator} 
          keyExtractor={(item, index) => index.toString()}           
          renderItem={({ item }) => (                           
            <View style={{ backgroundColor: 'white', padding: 20 }}>
              <Text>Inventory ID: {item.recordID}</Text>
              <Text>Name: {item.inventoryName}</Text>
              <Text>Date: {item.date}</Text>                                   
              <View>
              {
                ingredients.filter(ing => ing.inventoryID == item.recordID).map(
                  (ingredient) => {
                    return (
                      <View key={ingredient.ingredientID}>
                        <Text>IngredientID: {ingredient.ingredientID}</Text> 
                        <Text>IngredientType: {ingredient.ingredientType}</Text> 
                        <Text>Ingredient: {ingredient.ingredient}</Text>                        
                      </View>
                    )})
              }              
              </View>
            </View> 
          )}             
        />
      </View> 
    );    
  }
}