Sometimes we need to reach outside react in order to add functionality to our components. For example, we have this video player component, we have a video element.

And we want to be able to play and pause it using these two buttons, as well as show its current state. There's no react way to do this. To make this work, we need to grab the underlying video element, and then play it using that reference with the play method or pause it using the pause method.

But instead of using something like document query selector, in order to grab a reference to a given element, react gives us a convenient hook called use ref, we can import it from react.

And if we wanted to get a reference to any DOM elements, such as this h1, we could do that first by calling use ref creating a variable for it and using the built in ref prop on the JSX element, then passing our created ref down to it after we've done that we can access the element itself off of the current property, which is kind of a pointer to the underlying element.

We can say ref dot current and if we open up the console, we have the h1 itself.

Your job in this challenge is to use a ref for the video element. Use the pause and play methods to make these two buttons functional and also display the current state of the video whether it's playing or not.

The way that you can do that is with the help of a custom a couple of custom prompts that will give you information about whether the videos playing or paused and those are on Play and on paused.