Parsing Data From Firebase In React

Making an inventory management app for internal use with my side hustle (AV company). My current focus is reading the Gear objects from my Firebase RTDB into usable objects.

The structure of my database (log of snapshot.val()): This is the relevant code that produced that output:

import React, { useEffect, useState } from 'react';
import { rtdb } from './rtdb_config';
import { DatabaseReference, onValue, push, ref, set } from 'firebase/database';
import { Gear } from './Gear';

export default function App() {
  const [gear, setGear] = useState([]);

  useEffect(() => {
    const gearRef = ref(rtdb, "GearContainer");
    onValue(gearRef, (snapshot) => {
      if (snapshot.exists()) {
        console.log(snapshot.val());
      }      
    });
  }, []);

    return ( 
      <div>
      <h1>Data from database</h1>
    </div>
    );
}

Each object is stored under a key randomly generated by Firebase (childByAutoId is the default when push()ing to DB - would rather the key be the name but I'll look into that). Each object has information that I want to read into React and map to a new Gear object:

export class Gear {
        name: string;
        includes: string[];
        purchaseCost: number;
        rentalCost: number;
        powerDraw: number;
        qtyOwned: number;
        qtyAvail: number;
        serviceTickets: ServiceTicket[];
        notes: string;

        constructor(
                _name: string,
                _includes: string[],
                _purchaseCost: number,
                _rentalCost: number,
                _powerDraw: number,
                _qtyOwned: number,
                _notes: string
        ) {
                this.name = _name;
                this.includes = _includes;
                this.purchaseCost = _purchaseCost;
                this.rentalCost = _rentalCost;
                this.powerDraw = _powerDraw;
                this.qtyOwned = _qtyOwned;
                this.notes = _notes;
                this.serviceTickets = [];
                this.qtyAvail = _qtyOwned;
        }
}

I can't use the .map() function because I have my containers set up as an object with children, not an array. I did this because to update an item in an array, I have to bring down the whole array, update it, then send it back up to the DB.

Object.keys() isn't exactly what I need and I haven't found anything in the docs that would be useful in this situation. Is there any help built into React for this? I would just iterate through the objects in each category (infrastructure/laserFixtures/sfx/etc) but I'm unsure of how to do that for an object with children rather than an array.

Can I

1. Bring down the gear objects from the DB to properly set up Gear objects in React using built in react functionality (like .map())? or

2. Convert the JSON objects for my containers (infrastructure, laserFixtures, sfx, etc) into an array of objects when bringing them into React (which I could then .map())?

I can reformat this database any way necessary to make this work, but want to avoid using arrays, which would be very useful when parsing everything, but also compute-intensive and unscalable when I want to update or add items.

This is my second project in React, and the first was 5 years ago, so please excuse my lack of knowledge and point me towards a learning resource if I'm missing anything. Thank you to all!

If you want to convert the value from Firebase into an array, you can use the built-in forEach operation of the DataSnapshot object that you get back:

const gearRef = ref(rtdb, "GearContainer");
onValue(gearRef, (snapshot) => {
  if (snapshot.exists()) {
    const children = [];
    snapshot.forEach((child) => {
      children.push(key: child.key, ...child.val());
    })
    console.log(children);
  }      
});