Inline reduce function in react component

Hello,
I’m trying something I can’t really find any documentation online about. I have an array of objects and I’d essentially like to display a count based on some logic. Let me show you:

<div>
    {`Number Accepted: ${array.reduce((acc, currVal) => {
            if (currVal.someAttribute === 4) {
                return acc + 1;
            }
        }, 0)}
    `}
</div>

Essentially what I’d like is if it displayed Number Accepted: 0 or whatever the final count is but it currently says undefined. Can I not use reduce in this way?

This is not a React issue but a JS one. To look at the JS:

const array = [
  { someAttribute: 1 },
  { someAttribute: 4 },
  { someAttribute: 2 },
  { someAttribute: 4 },
];
const answer = array.reduce((acc, currVal) => {
  if (currVal.someAttribute === 4) {
    return acc + 1;
  }
}, 0);

console.log(answer);
// NaN

Why is that NaN? In the reduce method, you much each time return what you want the next acc to be. In your function, if someAttribute is not 4, your callback return nothing (aka undefined). You want something like this:

const answer = array.reduce((acc, currVal) => {
  if (currVal.someAttribute === 4) {
    return acc + 1;
  } else {
    return acc;
  }
}, 0);

Or in full ES6 sexiness:

const answer = array.reduce(
  (acc, { someAttribute }) => someAttribute === 4 ? acc + 1: acc,
  0
);

@kevinSmith that was precisely the issue!! That’s twice in like two weeks you’ve saved me from doing irreversible damage to my keyboard. I cannot thank you enough!!!
Edit: that’s also two JS errors I’ve made thinking it was react related. I think I need to go back and do a JS review.

You thank me by paying it forward. Spend some time on the forum sharing what you’ve learned. We’re all climbing the same ladder here, but we help those below us just like the ones above us have helped us.

that’s also two JS errors I’ve made thinking it was react related. I think I need to go back and do a JS review

Maybe, I don’t know. I do know that people make silly little JS mistakes here and there. And I do know that reduce confuses a lot of people. Seriously, I once had to explain to a senior dev how it works.

I think at the very least the lesson is: If something isn’t doing what you expect, simplify and narrow down where it is. Figure out where it is doing what you expect and then find where it stops doing what you expect. And always check the docs. Seriously, I have reduce down pretty well but there are other prototype methods that I have to check. In this case, this would have been my first stop. But yeah, we can all use a little JS (or whatever) review from time to time.

But don’t be too hard on yourself. This is hard stuff. You’re doing something that most people don’t even understand - be proud of that.

@kevinSmith thanks for the encouragement that truly means a lot and I will spend some time here like you suggest and see if I can provide some assistance!

I think you’re right about simplifying and narrowing down the issue at hand. I should probably try rewriting these functions in just a pure JS environment to first isolate whether or not it’s JS or React giving me the issue then proceed from there.

It’s usually my first instinct to go back and review material I’ve already learned but perhaps you’re right there too, instead of spending time on something that may not provide much additional benefit I should spend more time on creating a process for breaking issues down better. Thank you again!

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.