Why does useState not increment

Question

I'm trying to implement useState to store an incrementing value. When I try incrementing the value it doesn't update it. I have tried manually setting the value to a specific number and this does work. What is wrong?

const [cardsIndex, setCardsIndex] = useState(0);

       <Card style={[styles.card, styles.card1]} key={index}
          onSwipedRight={(event) => { setCardsIndex(cardsIndex+1);}}
          onSwipedLeft={(event) => { setCardsIndex(cardsIndex+1);}}
       >

Answer 1

Whenever you want to update the state based on previous value of the state then you must use a function in setState.

i.e.

setCardsIndex((prevValue) => prevValue + 1)

Docs: https://reactjs.org/docs/hooks-reference.html#functional-updates

Answer 2

Just change :

onSwipedRight={(event) => { setCardsIndex(cardsIndex+1);}}
onSwipedLeft={(event) => { setCardsIndex(cardsIndex+1);}}

to :

onSwipedRight={(event) => {() => { setCardsIndex(cardsIndex =>cardsIndex+1);}}
onSwipedLeft={(event) => { () => { setCardsIndex(cardsIndex =>cardsIndex+1);}}}