DOM elements. 
  * A component doesn’t expose its DOM nodes by default. You can opt into exposing a DOM node by using ` forwardRef ` and passing the second ` ref ` argument down to a specific node. 
  * Avoid changing DOM nodes managed by React. 
  * If you do modify DOM nodes managed by React, modify parts that React has no reason to update. 

##  Try out some challenges

1  .  Play and pause the video  2  .  Focus the search field  3  .  Scrolling
an image carousel  4  .  Focus the search field with separate components

####

Challenge  1  of  4  :

Play and pause the video

In this example, the button toggles a state variable to switch between a
playing and a paused state. However, in order to actually play or pause the
video, toggling state is not enough. You also need to call [ ` play() `
](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) and
[ ` pause() ` ](https://developer.mozilla.org/en-
US/docs/Web/API/HTMLMediaElement/pause) on the DOM element for the ` <video> `
. Add a ref to it, and make the button work.

App.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    import { useState, useRef } from 'react';
    
    export default function VideoPlayer() {
      const [isPlaying, setIsPlaying] = useState(false);
    
      function handleClick() {
        const nextIsPlaying = !isPlaying;
        setIsPlaying(nextIsPlaying);
      }
    
      return (
        <>
          <button onClick={handleClick}>
            {isPlaying ? 'Pause' : 'Play'}
          </button>
          <video width="250">
            <source
              src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
              type="video/mp4"
            />
          </video>
        </>
      )
    }
    
    

Show more

For an extra challenge, keep the “Play” button in sync with whether the video
is playing even if the user right-clicks the video and plays it using the
built-in browser media controls. You might want to listen to ` onPlay ` and `
onPause ` on the video to do that.

Show solution  Next  Challenge

[ Previous  Referencing Values with Refs  ](/learn/referencing-values-with-
refs) [ Next  Synchronizing with Effects  ](/learn/synchronizing-with-effects)

* * *

How do you like these docs?

[ Take our survey!  ](https://www.surveymonkey.co.uk/r/PYRPF3X)

* * *

[ ](https://opensource.fb.com/)

©  2024

[ Learn React ](/learn)

[ Quick Start ](/learn)

[ Installation ](/learn/installation)

[ Describing the UI ](/learn/describing-the-ui)

[ Adding Interactivity ](/learn/adding-interactivity)

[ Managing State ](/learn/managing-state)

[ Escape Hatches ](/learn/escape-hatches)

[ API Reference ](/reference/react)

[ React APIs ](/reference/react)

[ React DOM APIs ](/reference/react-dom)

[ Community ](/community)

[ Code of Conduct
](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md)

[ Meet the Team ](/community/team)

[ Docs Contributors ](/community/docs-contributors)

[ Acknowledgements ](/community/acknowledgements)

More

[ Blog ](/blog)

[ React Native ](https://reactnative.dev/)

[ Privacy ](https://opensource.facebook.com/legal/privacy)

[ Terms ](https://opensource.fb.com/legal/terms/)

[ ](https://www.facebook.com/react) [ ](https://twitter.com/reactjs) [
](https://github.com/facebook/react)

##  On this page

  * Overview 
  * Getting a ref to the node 
  * Example: Focusing a text input 
  * Example: Scrolling to an element 
  * Accessing another component’s DOM nodes 
  * When React attaches the refs 
  * Best practices for DOM manipulation with refs 
  * Recap 
  * Challenges