CODEWITHSUNDEEP
javascriptreactjstypescript
samir
samir

Reputation: 17

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

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

Upvotes: 1

Views: 84

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074365

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: {} };
    // ...

Upvotes: 2

Related Questions