ReactJS: How to convert an iterated num into different num using if statement?-CodePudding

I am trying to convert an amount from iterated object using else if statements and then the return number will be added/render to the points.

Also if a user ordered another it will be added to the existing points.

Or is there a better way to do this other than else if statements?

The ordered amount is num from the object and converted into a return points

(ordered amount is 29) = return 1;

(ordered amount is 276) = return 10;

(ordered amount is 522) = return 20;

(ordered amount is 1114) = return 48;

This is my code below

const [points, setPoints] = useState(0)

const handlePoints = (value) => {
  {userOrdered.map((ordered) => {
    if (ordered.amount === 29) {
      return setPoints(points.quantity   1);
    } else if (ordered.amount === 276) {
      return setPoints(points.quantity   10);
    } else if (ordered.amount === 522) {
      return setPoints(points.quantity   20);
    } else if (ordered.amount === 1114) {
      return setPoints(points.quantity   48);
    }
    })
  }
}

<Typography onChange={handlePoints}>{points}</Typography>

CodePudding user response：

Assuming the points are also awarded for the amounts between the breakpoints... A newPoints variable is declared to add up points, then after the loop ended, it sets the state only once.

const [points, setPoints] = useState(0)

const handlePoints = (value) => {
  let newPoints = points.quantity;
  
  userOrdered.forEach((ordered) => {
    if (ordered.amount >= 29 && ordered.amount <= 275) {
      newPoints  = 1;
    } else if (ordered.amount >= 276 && ordered.amount <= 521) {
      newPoints  = 10;
    } else if (ordered.amount >= 522 && ordered.amount <= 1113) {
      newPoints  = 20;
    } else if (ordered.amount >= 1114) {
      newPoints  = 48;
    }
  })
  
  setPoints(newPoints)
}

<Typography onChange={handlePoints}>{points}</Typography>

CodePudding user response：

You could go for a slightly more declarative approach (but IMO the if else isn't that bad when its this size either):

// Must remain sorted, but you could sort it using your own sort fn if you wanted. Just saves an op.
const AMOUNT_POINTS_LOOKUP = [
  { amount: 29, points: 1 },
  { amount: 276, points: 10 },
  { amount: 522, points: 20 },
  { amount: 1114, points: 48 },
]


const handlePoints = (userOrdered) => {
   const pointsToAddTotal = userOrdered.reduce((currPointsToAdd, currentOrder) => {
       return currPointsToAdd   (AMOUNT_POINTS_LOOKUP.findLast((rule, index) => currentOrder.amount >= rule.amount)?.points ?? 0)
   }, 0)

   // Ive assumed here handlePoints gets only newly added items in the form of userOrdered.
   // If it was all of the items every time, you would not need to add onto `points` you'd just
   // get `pointsToAddTotal` as is and set it in state.
   setPoints(points => points   pointsToAddTotal)
}

It's only really worth doing if you like being able to define the map in a way that is potentially configurable, from the server, or something like that.

CodePudding user response：

Considering the points value for specific amounts are fixed, you could create a static object that stores and keeps track of each ordered amount points value that gets added - which also makes it easy to update.

const ORDERED_AMOUNT_POINTS = {
    29: 1,
    276: 10,
    522: 20,
    1114: 48
}
const handlePoints = (value) => {
    userOrdered.forEach((ordered) => setPoints(points.quantity   
     ORDERED_AMOUNT_POINTS[`${ordered.amount}`]))
}

<Typography onChange={handlePoints}>{points}</Typography>