Goal: update value of currentVideo to the first item in videoUrls array after the loadingUrl video has played. The below snippet has been massively simplified but the idea is to set the initial state of currentVideo to a loading video (loadingUrl). After the loadingUrl video finishes, the handleFirstIteration function is called and will set the value of currentVideo to the first item in the videoUrls array.
Problem: handleFirstIteration is firing, as evidenced by the console.logs appearing, however the value of currentVideo remains as loadingUrl.
const videoUrls = [src1, src2, src3];
const loadingUrl = [loadingSrc];
const [currentVideo, setCurrentVideo] = useState(loadingUrl);
const handleFirstIteration = () => {
console.log('handle first iteration called');
setCurrentVideo(videoUrls[0]);
console.log('Current video is now: ', currentVideo);
}
return (
{/* component markup removed for readibility */}
{/* custom video player, simplified for clarity */}
...
<VideoPlayer
src={currentVideo}
onEnded={handleFirstIteration} />
...
)
}
Any suggestions on how to get the currentVideo variable to update?
