ReactJS: Need help debugging

Question

I have a set of data:

+----+---------+--------+---------------------+
| id | goal_id | saved  | date                |
+----+---------+--------+---------------------+
|  1 |       1 |  50.00 | 2020-12-24 02:35:04 |
|  2 |       2 | 100.00 | 2020-12-24 02:35:04 |
|  3 |       3 | 500.00 | 2020-12-24 02:35:04 |
|  4 |       3 |  10.00 | 2020-12-24 02:35:04 |
|  5 |       3 |  50.00 | 2020-12-24 02:35:04 |
|  6 |       3 | 300.00 | 2020-12-24 02:35:04 |
+----+---------+--------+---------------------+

That belongs to another data set:

+----+--------+------------+
| id | myGoal | goal       |
+----+--------+------------+
|  1 | House  | 1000000.00 |
|  2 | Car    |   21000.00 |
|  3 | School |   13000.00 |
+----+--------+------------+

I've mapped it through the front end:

        {saveData &&
      saveData.map((saveItem) => {
        return (
          <div className="card">
            <ul className="card__list" key={saveItem.id}>
              <SaveCard key={saveItem.id} saveItem={saveItem} />
            </ul>
          </div>
        );
      })}

and now I'm trying to group them by with their respected ID's :

  const [goalRemainder, setGoalRemainder] = useState([saveItem]);

  const saveID = goalRemainder.reduce((savedAmount, { goal_id, saved }) => {
    (savedAmount[goal_id] = savedAmount[goal_id] || []).push(saved);
    return savedAmount;
  }, {});

My output looks like :

{1: Array(1)} 1: [50]
{2: Array(1)} 2: [100]
{3: Array(1)} 3: [500]
{3: Array(1)} 3: [10]
{3: Array(1)} 3: [50]
{3: Array(1)} 3: [300]

Instead I want :

{1: [50]}
{2: [100]} 
{3:[500, 10, 50, 300]} 

My question is, where have I gone wrong?

Answer 1

please refer to this code piece: https://codesandbox.io/s/dreamy-dew-0vlj5?file=/src/App.js for your expected output.

const saveItem = [
    {
      goal_id: 1,
      saved: 1
    },
    {
      goal_id: 1,
      saved: 2
    },
    {
      goal_id: 2,
      saved: 3
    },
    {
      goal_id: 3,
      saved: 4
    },
    {
      goal_id: 3,
      saved: 1
    }
  ];
  const [goalRemainder, setGoalRemainder] = useState(saveItem); // no array brackets here

  const savedAmount = {};
  const saveID = goalRemainder.reduce((savedAmount, { goal_id, saved }) => {
    (savedAmount[goal_id] = savedAmount[goal_id] || []).push(saved);
    return savedAmount;
  }, {});
  console.log(saveID);