SectionList from Multiple Sets of Data - react-native

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"}]
Edit after trying answer below: Getting Type error on SecitonList.js file:
render(): React.Node {
const {
stickySectionHeadersEnabled: _stickySectionHeadersEnabled,
...restProps
} = this.props;
const stickySectionHeadersEnabled =
_stickySectionHeadersEnabled ?? Platform.OS === 'ios';
return (
<VirtualizedSectionList
{...restProps}
stickySectionHeadersEnabled={stickySectionHeadersEnabled}
ref={this._captureRef}
getItemCount={items => items.length}
getItem={(items, index) => items[index]}
/>
);
}
The error is "Cannot read property length of undefined" It points to the line above "getItemCount={items => items.length}. I will work on a resolution.

Answer 1

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.forEach((inv) => {
const ingredients = realm.objects('Ingredients').filtered('inventoryID == $0', inv.recordID);
const ingredientArray = ingredients.map((ing) => ({ingredientID: ing.ingredientID, ingredientType: ing.ingredientType, ingredient: ing.ingredient}));
inventoryArray.push({title: inv.inventoryName, recordID: inv.recordID, date: inv.date, data: ingredientArray});
});
const renderItem = ({item}) => {
return (
<View>
<Text>{item.ingredientID}</Text>
<Text>{item.ingredientType}</Text>
<Text>{item.ingredient}</Text>
</View>
);
};
const renderSectionHeader = ({section: {title}}) => {
return (
<View>
<Text>{title}</Text>
</View>
);
};
const InventoryList = () => {
return (
<SectionList
sections={inventoryArray}
keyExtractor={(item, index) => item + index}
renderItem={renderItem}
renderSectionHeader={renderSectionHeader}
/>
);
};
export default InventoryList;

Answer 2

I truly appreciate the assistance. However, 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. See code below.
import * as React from 'react';
import {View, Text, FlatList} from "react-native";
import realm from '../schemas/InventoryDatabase';
const inventories = Object.values(realm.objects('Inventories'));
const ingredients = Object.values(realm.objects('Ingredients'));
export default class ViewInventory extends React.Component {
constructor(props) {
super(props);
}
ListViewItemSeparator = () => {
return (
<View style={{ height: 0.5, width: '100%', backgroundColor: '#000' }} />
);
};
render() {
return (
<View>
<FlatList
data={inventories}
ItemSeparatorComponent={this.ListViewItemSeparator}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => (
<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 (
<Text>IngredientID: {ingredient.ingredientID}</Text>,
<Text>IngredientType: {ingredient.ingredientType}</Text>,
<Text>Ingredient: {ingredient.ingredient}</Text>
)})
}
</View>
</View>
)}
/>
</View>
);
}
}