here

[zeydlitz]

import React from 'react' import TinderCard from 'react-tinder-card' import {Card} from '@mui/material' import {removeItem, sendStockLike, sendStockDislike} from './../../Store/SwipingSlice'; import {useDispatch, useSelector} from "react-redux"; import {AppDispatch, RootState} from "../../Store/Store";

const ShareCard = () => { const dispatch = useDispatch(); let items = useSelector((state: RootState) => state.swiping.stocks); const current = useSelector((state: RootState) => state.swiping.currentStock);

items = [...items].reverse();

if (!current) {
    return (<div>no data</div>)
}

const handleSwipe = (direction: any) => {
    dispatch(removeItem(current.id));
    if (direction === 'right') {
        dispatch(sendStockLike(current.id))
    } else {
        dispatch(sendStockDislike(current.id))
    }
}

console.log(items);

let isVisible = true
return (<Card className='swipe'>
    <div className='tinderCard'>
        {items.map((r, i) => (
            <TinderCard
                onSwipe={i === 0 ? handleSwipe : undefined} // Only attach handler to the top card
                preventSwipe={['up', 'down']}
                swipeRequirementType='position'
                className='cardItem'
                key={i}
            >
                <img src={r.image_url} className='card' alt={r.title}/>
            </TinderCard>
        ))}
    </div>
    <div className="textOverlay">
        {current.description}
    </div>
</Card>)

}

export default ShareCard;

[zeydlitz]

It seems you're facing an issue where the onSwipe action is being invoked multiple times. This can happen due to multiple reasons:

Multiple Cards Reacting to Swipe: You're mapping through items and attaching the onSwipe handler to each TinderCard. If the cards are stacked and you swipe one, it might trigger the event for underlying cards as well. Event Propagation: Events in JavaScript can bubble up or be captured down the DOM tree, which might lead to unintended multiple invocations. To fix this, you can:

Ensure Only Top Card is Swipable: Only the top card (or the card in focus) should be able to be swiped. You can conditionally attach the onSwipe handler only to the top card. Stop Event Propagation: Though this is not directly applicable to the onSwipe from react-tinder-card, in general, using event.stopPropagation() can prevent an event from triggering parent handlers.

[zeydlitz]

@SilichStudent

[zeydlitz]

import React from 'react' import TinderCard from 'react-tinder-card' import {Card} from '@mui/material' import {removeItem, sendStockLike, sendStockDislike} from './../../Store/SwipingSlice'; import {useDispatch, useSelector} from "react-redux"; import {AppDispatch, RootState} from "../../Store/Store";

const ShareCard = () => { const dispatch = useDispatch(); let items = useSelector((state: RootState) => state.swiping.stocks); const current = useSelector((state: RootState) => state.swiping.currentStock);

items = [...items].reverse();

if (!current) {
    return (<div>no data</div>)
}

const handleSwipe = (direction: any) => {
    dispatch(removeItem(current.id));
    if (direction === 'right') {
        dispatch(sendStockLike(current.id))
    } else {
        dispatch(sendStockDislike(current.id))
    }
}

console.log(items);

return (
    <Card className='swipe'>
        <div className='tinderCard'>
            {items.map((r, i) => (
                <TinderCard
                    onSwipe={i === 0 ? handleSwipe : undefined} // Only attach handler to the top card
                    preventSwipe={['up', 'down']}
                    swipeRequirementType='position'
                    className='cardItem'
                    style={{ visibility: i === 0 ? 'visible' : 'hidden' }} // Only show the top card
                    key={i}
                >
                    <img src={r.image_url} className='card' alt={r.title}/>
                </TinderCard>
            ))}
        </div>
        <div className="textOverlay">
            {current.description}
        </div>
    </Card>
);

}

export default ShareCard;

[zeydlitz]

One of the possible reasons for the onSwipe action being triggered multiple times is that multiple TinderCard components might be stacked on top of each other, and when you swipe one card, the swipe event might propagate to the underlying cards as well.

A potential solution is to ensure that only the top card (the current card in focus) is swipable and visible, while the rest are hidden. This way, the swipe event will only be triggered once for the top card.

Here's a modified version of your code:

[zeydlitz]

With this approach, we're setting the visibility of all TinderCard components except the top one to hidden. This ensures that only the top card can be interacted with and swiped. Once the top card is swiped, the next card in the array will become the top card, and it will be made visible and swipable.

[zeydlitz]

@SilichStudent