Im working with react native chart kit, I want to be able to display a graph of spending in my react native app. I'm using moment.js and moment-range

calendar.forEach((range) => {
    const label = range.start.format('DD MMM')
    loaded.labels.push(label);

    const filtered = spendingData
        .filter(item => range.contains(moment(item.timestamp)))
        .reduce((a,b) => (a.spent || 0) + (b.spent || 0), 0);
    
        loaded.data.push(filtered);
});

setGraph({...graph, labels: loaded.labels, data: loaded.data});

The filter by its self returns the correct items, each time one or more objects fall within the range it should be then passed to the reduce function to add them.

Objects returned without reduce (dates with nothing under means that there where no spendings that day) this works fine:

26 Dec
---------
02 Jan
---------
09 Jan
---------
16 Jan

Object {
  "spent": 3.8,
  "timestamp": 1642713860026,
}

Object {
  "spent": 12,
  "timestamp": 1642714020254,
}

---------
23 Jan
---------
30 Jan

Object {
  "spent": 2.4,
  "timestamp": 1643582338356,
}

Object {
  "spent": 5.5,
  "timestamp": 1643582748421,
}

Data returned after reducing the item.spent values, this is where the problem lies:

0

0

0

12

0

5.5