'How to update state in an if statement contained in a map

I'm mapping an object and depending on the value of the currently mapped object (either 1 or greater than 1) it will go to it's respective If function.

I'm trying to update state to know how many object elements are matching the given requirements.

const displayMovements = () => {
  return(
    movements.map((m) => {
      if (m.value === 1) {
        setAmountEqualToOne(amountEqualToOne + 1)
        return(
          <DisplayTemplateOne prop={m}/>
        )
      } else if (m.value > 1) {
        setAmountGreaterThanOne(amountGreaterThanOne + 1)
          return(
            <DisplayTemplateTwo prop={m}/>
          )
      }
    })
  )
}

I'm running into an infinite loop error and am unsure of where to go next.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source