CODEWITHSUNDEEP
reactjsreact-nativeuse-state
chackerian
chackerian

Reputation: 1401

Why does useState not increment

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

Upvotes: 3

Views: 2747

Answers (2)

Mubashir Hassan
Mubashir Hassan

Reputation: 199

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

Upvotes: 8

monim
monim

Reputation: 4383

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

Upvotes: 1

Related Questions