Sometimes, we need to extend the functionality of our React components by interacting with the DOM directly. Take, for example, a video player component that includes a video element. We might want to control the playback of this video with play and pause buttons, as well as display its current state. React doesn't provide a built-in method for this. To achieve this functionality, we need to obtain a reference to the underlying video element and then use the play
or pause
methods on that reference.
Instead of using document.querySelector
to select a DOM element, React offers a convenient hook named useRef
, which we can import from React. If we want to reference any DOM element, like an h1
tag, we can do so by first calling useRef
to create a reference variable. We then utilize the ref
prop in the JSX element to pass down our reference. After this setup, we can access the DOM element itself via the current
property of the reference, which acts as a pointer to the actual element. By accessing ref.current
, we can interact with the h1
element directly, as seen when we inspect the console.
Your challenge is to utilize useRef
for the video element. Implement functionality for the play and pause buttons using the play
and pause
methods. Additionally, display the video's current state, indicating whether it is playing or paused. You can achieve this with a couple of custom event handlers: onPlay
and onPause
, which will provide information about the video's playback status.