Reloading Swiper Card List

[Nestor231]

Hello @webraptor,

Id like to ask if there's a way we can reload the swiper with a new list of cards ? I tried Setting state in the component like this: const[cardState, setCardState] = useState({cards: ['item1','item2','item3'], allSwipe: false})

then set the swiper's card list like this:

<Swiper cards={cardState.cards} ...{other.props} />

then had a reloadButton of sorts to refresh the list:

<Button onClick={()=>{ setCardState({cards:['item4','item5']}) }}

then i swiped all cards until they reach zero, and clicked my reload Button. But nothing happened. Need your guidance on this

[SDE-Arvind]

you can try (This is working in my project) const[cardState, setCardState] = useState( ['item1','item2','item3']) <Swiper cards={cards} ...{other.props} />

<Button onClick={()=>{ setCardState(['item4','item5']) }}

[RuzenDev]

No, just changing the state is not rerendering

@webraptor Any suggestions plz

[forchello]

Hi all, I've encountered the problem of the impossibility of updating the array of cards. Dynamic changing of the card array state does not help. Then the following solution came to mind:

Create a key state that changes with each swipe:

const [key, setKey] = useState(0);

<Swiper key={key} cards={cards} onSwiped={() => setKey(key+1)} {...otherProps} />

Thus, each time the key property changes, the Swiper component will be rerender and the array of items will change accordingly.

[paolopedrigal]

this solved this issue for me

Hi all, I've encountered the problem of the impossibility of updating the array of cards. Dynamic changing of the card array state does not help. Then the following solution came to mind:

Create a key state that changes with each swipe:

const [key, setKey] = useState(0);

<Swiper key={key} cards={cards} onSwiped={() => setKey(key+1)} {...otherProps} />

Thus, each time the key property changes, the Swiper component will be rerender and the array of items will change accordingly.