How to process updated object property values with Javascript and React?

I am looking to use Node and React for displaying dynamic table data where one property, `cost’ will be updated via a WebSocket listener and perform some functions, i.e. find highest/lowest, or addition, etc., to all costs within a list of pools (also think of a table with updating live stock values and columns for calculated values):

┌─────────┬─────────┬──────────────────────────────────┐
│ (index) │  name   │              pools               │
├─────────┼─────────┼──────────────────────────────────┤
│    0    │ 'pizza' │      [ [Object], [Object] ]      │ sum(cost), etc.
│    1    │ 'apple' │ [ [Object], [Object], [Object] ] │ sum(cost), etc.
└─────────┴─────────┴──────────────────────────────────┘

// singular pool object
// {Walmart, apple, 1.Wallmart.apple, 1.00}
class Pool {
    constructor(exchangeName, symbols, id, cost) {
        this.exchangeName = exchangeName;
        this.symbols = symbols;
        this.id = id;
        this.cost = cost;
    }
}

// takes in an array of pools
class Pools {
    constructor(poolName, pools) {
        var costCounter = 0;        // add up all costs in pools
        var exchangeList = '';
        for (var poolObj of pools) {
            //costCounter += poolObj.cost        // this works on object initialization but not cost updated property      
            exchangeList += poolObj.exchangeName + " ";
        }

        this.poolName = poolName;
        this.pools = pools;
        //this.costCounter = _costCounter;
        this.exchangeList = exchangeList;
    }

    // perform math functions
    get costCounter() {
        for (var poolObj of pools) {
            _costCounter += poolObj.cost;
        }
        return _costCounter;
    }

}

var arrPools = [];  // array of a symbol's pools

arrPools.push(new Pool("1.exch", "1.symbols", "1.someID", 1.00)),
arrPools.push(new Pool("2.exch", "2.symbols", "2.someID", 2.00)),
arrPools.push(new Pool("3.exch", "3.symbols", "3.someID", 3.00))

var thisPoolResults = new Pools("First Pool", arrPools);

//console.log(arrPools);
console.log(thisPoolResults);

After the initial data is defined, I will want subscribe to a cost event that will update each individual Pool.cost in the collection.

The output table will contain rows of individual pools properties and a calculated total cost, by costCounter.

I am having a difficult time creating a getter to automatically recalculate costs when a cost is updated.

As I am planning to use React (I assume there are similar features to Angular for data updates), what is a recommended way of achieving this?