Accessing video.currentTime

Hello, I am attempting to access video.currentTime in order to dynamically add a marker on the current time with a button click. I am new to React, but have so far gathered that in order to access this variable in a function, I should be declaring an initial variable with useState, like the consts used in your example.

Since currentTime is outputted in the onProgress callback event, I am trying to set this state variable in the handleProgress() event handler. The issue is calling setCurrentTime within that handler does not update my state variable for use in other components.

Here is an example of what I am trying to do, with the currentTime being rendered to the DOM for simplicity (instead of being accessed in a createNewMarker() function (this is mostly taken from your example code):

(I have removed all code that is irrelevant to this question)

import React, { useState } from 'react'
import VideoPlayer from 'react-video-player-extended'
import video from '../20210602-100000-1-15-2-1.mp4'

function Player() {
    const [currentTime, setCurrentTime] = useState(0)

    const handleProgress = (e) => {
        console.log('Current time: ', e.target.currentTime)
        setCurrentTime(e.target.currentTime)
        console.log(currentTime)
    }

    return (
        <div>
            <h2>Player</h2>
            <VideoPlayer
                url={video}
                onProgress={handleProgress}
            />
            <p>Current Time: {currentTime}</p>
        </div>
    )
}

The variable remains unchanged from the initial '0' set with useState.

I have read that state is handled asynchronously, which I've interpreted as this state variable I am trying to set not updating because the component itself has already been rendered. A solution I found was to use the useEffect hook, combined with a callback function as the paramater in setCurrentTime, but I have been unable to get this working.

useEffect() cannot be called within the handleProgress() function, but I am unable to see how I can access the value outside the scope of that handleProgress() function (it is contained within the event, e.target.currentTime).

Another possible solution I can see is the useRef hook, but I am unable to access that when setting it either.

Is there an easy way to access the media element's currentTime? Or am I completely off base here? I have pondered altering the src itself to give the <video> element an ID and simply accessing the currentTime via DOM element queries, but this seems overcomplicated (eg. currentTime = document.getElementById('video-player').currentTime;)

Any help would be enormously appreciated, I have only played with React for a few days so far and this is a blocker I cannot seem to get past.

amittkSharma / react-video-player-extended

Accessing video.currentTime #7