This is a React Native component with child component to render a nested list of places within a place

HouseContainer.tsx

import React, { useEffect, useState } from "react";
import { View, Text, FlatList, StyleSheet } from "react-native";

// Data Structure
interface Place {
  id: string;
  object_type: string;
  name: string;
  parent_place: string | null;
  traps_count: number;
}

interface ParentMap {
  id: string;
  children?: Place[];
}

const HouseContainer = ({ places }: { places: Place[] }) => {
  const [restructuredParents, setRestructuredParents] = useState<ParentMap>({});
  const [rootParent, setRootParent] = useState<Place | null>(null);

  useEffect(() => {
    cleanseParents(places);
  }, []);

  const cleanseParents = (places: Place[]) => {
    let parents = {...restructuredParents};

    places.forEach((place) => {
        if (place.parent_place){
            if (!parents[place.parent_place]){
              parents[place.parent_place] = {id: place.parent_place, children: [place]}
            } else {
              parents[place.parent_place].children = [...parents[place.parent_place].children ?? [], place]
            }
          } else {
        setRootParent(place)
        if (!parents[place.id]) {
          parents[place.id] = { id: place.id, children: [] };
        }
      }
    });
    
    setRestructuredParents(parents);

  };

  return (
    <View style={styles.container}>
      {rootParent && <PlaceComponent place={rootParent} parentsMap={restructuredParents} isRoot />}
    </View>
  );
};

interface PlaceInterface {
  place: Place;
  parentsMap:ParentMap;
  isRoot?: boolean;
  marginLeft?: number;
}

const PlaceComponent = ({ place, parentsMap, isRoot, marginLeft = 0 }: PlaceInterface) => {
  const children = parentsMap[place.id]?.children || [];

  return (
    <View style={[styles.placeContainer, { marginLeft }]}> 
        <Text style={isRoot ? styles.rootText : styles.placeText}>
            {place.name} [traps: {place.traps_count}]
        </Text>
        <FlatList
        data={children}
        keyExtractor={(child) => child.id}
        renderItem={({ item }) => (
            <PlaceComponent place={item} parentsMap={parentsMap} marginLeft={marginLeft + 15} />
        )}
        />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  placeContainer: {
    marginVertical: 4,
  },
  place: {
    padding: 8,
    borderRadius: 5,
    backgroundColor: "#f0f0f0",
  },
  rootText: {
    fontSize: 18,
    fontWeight: "bold",
  },
  placeText: {
    fontSize: 16,
  },
});

export default HouseContainer;