How can I make a conditional reduce call for an array of objects in React?

Question

This is the numbers array which is defined in a React Redux reducer file:

const initialState = {
    numbers: [
        { name: 'max', num: 3, inCart: false },
        { name: 'jack', num: 2, inCart: true },
        { name: 'jack', num: 2, inCart: true }
    ]
};

In a component, I want to sum all the numeric values in all the objects in the numbers array only if inCart === true.

This is how I'm doing it:

useEffect(() => {
    const total = props.numbers.reduce((prev, current) => {
        if (current.inCart) return prev + current.num;
    }, 0);
    console.log(total);
}, []);

And this is the console log I get:

NaN

So it's not working, what am I doing wrong?

add an else...?

Heretic Monkey
– Heretic Monkey

2020-05-28 12:41:35 +00:00
Commented May 28, 2020 at 12:41 — Heretic Monkey
– Heretic Monkey, Commented May 28, 2020 at 12:41

palaѕн · Accepted Answer · 2020-05-28 12:43:42Z

1

You need to return the updated prev at the end inside the reduce() method like:

const total = props.numbers.reduce((prev, current) => {
  if (current.inCart) prev += current.num;
  return prev;
}, 0);

const numbers = [
    { name: 'max', num: 3, inCart: false },
    { name: 'jack', num: 2, inCart: true },
    { name: 'jack', num: 2, inCart: true }
]

const total = numbers.reduce((prev, current) => {
  if (current.inCart) prev += current.num;
  return prev;
}, 0);

console.log(total);

answered May 28, 2020 at 12:43

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

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

Comments

Karthick Vinod · Accepted Answer · 2020-05-28 12:40:51Z

0

Does this help?

const total = props.numbers.reduce((prev, current) => {
    return (current.inCart) ? prev + current.num : prev;
}, 0);

answered May 28, 2020 at 12:40

Karthick Vinod

1,49710 silver badges11 bronze badges

Comments

TopWebGhost · Accepted Answer · 2020-05-28 12:47:15Z

0

You forgot to return prev when current.inCart is false.

const total = props.numbers.reduce((prev, current) => {
            if (current.inCart) return prev + current.num;
            return prev;  
        }, 0);

It should be like this.

answered May 28, 2020 at 12:47

TopWebGhost

3351 silver badge8 bronze badges

Comments

mplungjan · Accepted Answer · 2020-05-28 12:49:12Z

0

Reduce

props.numbers.reduce((acc, cur) => cur.inCart ? acc + cur.num : acc, 0);

or filter and reduce

const props = {
numbers: [
        { name: 'max', num: 3, inCart: false },
        { name: 'jack', num: 2, inCart: true },
        { name: 'jack', num: 2, inCart: true }
    ]
}
console.log(
  props.numbers
    .filter(item => item.inCart)
    .reduce((acc, cur) => acc + cur.num, 0)
)

answered May 28, 2020 at 12:49

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Comments

Dan · Accepted Answer · 2020-05-28 12:59:30Z

0

You could filter out the unnecessary items, and then reduce over the items inCart and accumulatively add up num property from each object.

const initialState = {
    numbers: [
        { name: 'max', num: 3, inCart: false },
        { name: 'jack', num: 2, inCart: true },
        { name: 'jack', num: 2, inCart: true }
    ]
};

initialState.numbers
  .filter(({ inCart }) => inCart)
  .reduce((acc, { num }) => acc += num, 0);

answered May 28, 2020 at 12:59

Dan

8,9229 gold badges46 silver badges82 bronze badges

Collectives™ on Stack Overflow

How can I make a conditional reduce call for an array of objects in React?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related