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?

Mark Feng · Accepted Answer · 2020-12-31 03:26:27Z

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);

As I didn't see your full code, I'm not sure how does goalRemainder.reduce work in your case. From my view, I think most of the logic is fine, as long as the usage of Array.reduce is following the document.

edited Dec 31, 2020 at 3:26

answered Dec 31, 2020 at 3:11

Mark Feng

1,0191 gold badge8 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mark Feng Over a year ago

@PrinceJelly Hi, I would suggest using a util method outside the component to do the grouping, and for the component, we can keep the state as simple as the rendering needs.

PrinceJelly Over a year ago

Mmm, Thanks for the reply! Do you think I should move it to a higher level? I'm currently using the function at the lowest level after mapping. It doesn't seem like it likes useState([saveItem]) without the array. I get the error : TypeError: goalRemainder.reduce is not a function.

Mark Feng Over a year ago

@PrinceJelly A tip would be to use console.log to print goalRemainder out, to see what the data type is. reduce is only for Array, and in your case, goalRemainder should be an array, otherwise there was some logic bug

Collectives™ on Stack Overflow

ReactJS: Need help debugging

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related