The onCardLeftScreen event handler triggers the console log function but doesn't update state using the setState hook? I have tested that this is the issue with an onClick function which runs as intended.
React code:
//sets initial cards within the queue
const [cardQueue, setCardQueue] = useState([Data[0], Data[1], Data[2]]);
//sets the index of card that will be pushed into queue
const [cardQueueLength, setCardQueueLength] = useState(Data.length - 1);
const autoplayChange = () => {
setSlideShow(!slideShow);
console.log("playing!");
};
const CardLeftScreen = () => {
//iterates through cards(sets up loop)
setCardQueueLength(
cardQueueLength < Data.length - 1 ? cardQueueLength + 1 : 0
);
//removes card from front of queue
cardQueue.shift();
//pushes a card to back of queue
cardQueue.push(Data[cardQueueLength]);
//sets slideshow to true
setSlideShow(true);
//console logs cards in arrays and the index of the card being pushed to back of queue
console.log(cardQueue);
console.log(cardQueueLength);
};
return (
<div className="cardStyles">
{cardQueue.map((Projects, index) => {
return (
<TinderCard
key={Projects.workName}
preventSwipe={["up", "down"]}
onCardLeftScreen={CardLeftScreen}
className="Cards"
>
<Carousel
showThumbs={false}
infiniteLoop={true}
swipeable={false}
emulateTouch={false}
showStatus={false}
autoPlay={slideShow}
dynamicHeight={false}
>
<div className="image-iframeContainer">
{Projects.Images &&
Projects.Images.map((Image, index) => {
return (
<div key={Image} className="image-iframeContainer">
<img alt="Images of web apps" src={Image} />
</div>
);
})}
</div>
</Carousel>
<h1>{Projects.workName}</h1>
{Projects.workTech.map((Tech, index) => {
return (
<p key={Tech} className="techList">
{Tech}
</p>
);
})}
<div className="descriptionContainer">
<p className="description">{Projects.workDescription}</p>
</div>
</TinderCard>
);
})}
<button className='cardLeftScreenButton' onClick={CardLeftScreen}>click for onCardLeftScreen desired funtion</button>
</div>
);
I have also set up a Sandbox to better display my issue, Hopefully, someone can find a solution my project is so nearly finished. the API used is React-Tinder-Card