Trying to use map method instead of for loop using React Typescript

Question

I'm trying to use map method use instead of for loop using React Typescript for below code but not working

Actual Code using for loop :

renderFunction(perkProgressData) {
    let tiers = [];
    let currentData = { item: {} }
    const data = perkProgressData.perkProgressData
    if (data && data.program && data.program.tiers) {
      tiers = data.program.tiers
      **for (let i = 0; i < tiers.length; i++) {**
        if (tiers[i].tierPerks[0].perkStatus === "UNCLAIMED" ||
          data.currentTierId === tiers[i].tierId) {
          currentData = { item: tiers[i] }
          break;
        }
      }
    }

tried using .map():(Not Working )

renderFunction(perkProgressData) {
    let tiers = [];
    let currentData = { item: {} }
    const data = perkProgressData.perkProgressData
    if (data && data.program && data.program.tiers) {
      tiers = data.program.tiers
      tiers.map((val) => {
        if (val.tierPerks && val.tierPerks[0].perkStatus === "UNCLAIMED" || 
          data.currentTierId === val.tierId) {
            currentData = { item: val }
          }
        });
      }
    }

There's no reason to use map in that code. You don't need the new array it creates. — T.J. Crowder
– T.J. Crowder, Commented Nov 13, 2019 at 16:33
MAP returns a new array but for loop doesn't. Do you need any a new array? — Harsh
– Harsh, Commented Nov 13, 2019 at 16:34
if for some reason you don't want to use for loop, you could use a forEach, but not map for sure — Konstantin
– Konstantin, Commented Nov 13, 2019 at 16:37
@Konstantin - Well, the OP wants to break the loop early (at least, the code they're replacing does), so it would be more of a some thing. But really, what they're doing is finding something in the array, so find. But it's troubling, I've seen a lot of this "map as a general way to loop through arrays" misunderstanding the last 18-24 months. Someone must be mis-teaching this. — T.J. Crowder
– T.J. Crowder, Commented Nov 13, 2019 at 16:42

T.J. Crowder · Accepted Answer · 2019-11-13 16:40:29Z

map isn't the right choice here, you don't need the new array it creates. Also, you want to stop early, which map doesn't do (unless you throw an error).

The for loop is fine, although you might consider for-of instead since you don't use the index:

renderFunction(perkProgressData) {
    let tiers = [];
    let currentData = { item: {} };
    const data = perkProgressData.perkProgressData;
    if (data && data.program && data.program.tiers) {
      tiers = data.program.tiers;
      for (const tier of tiers) {
        if (tier.tierPerks[0].perkStatus === "UNCLAIMED" ||
          data.currentTierId === tier.tierId) {
          currentData = { item: tier };
          break;
        }
      }
    }
    // ...

Or if you don't need tiers after the loop:

renderFunction(perkProgressData) {
    let currentData = { item: {} };
    const data = perkProgressData.perkProgressData;
    if (data && data.program && data.program.tiers) {
      for (const tier of data.program.tiers) {
        if (tier.tierPerks[0].perkStatus === "UNCLAIMED" ||
          data.currentTierId === tier.tierId) {
          currentData = { item: tier };
          break;
        }
      }
    }
    // ...

If you really want to use an array method, find would make sense:

renderFunction(perkProgressData) {
    const data = perkProgressData.perkProgressData
    let currentData =
      ( data &&
        data.program &&
        data.program.tiers &&
        data.program.tiers.find(tier =>
          tier.tierPerks[0].perkStatus === "UNCLAIMED" || data.currentTierId === tier.tierId
        )
      ) ||  { item: {} };
    // ...

Collectives™ on Stack Overflow

Trying to use map method instead of for loop using React Typescript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related