CODEWITHSUNDEEP
reactjs
Murakami
Murakami

Reputation: 3760

React Hooks UseRef issue

I'm trying to use React hooks. I have a problem with this code:

class VideoItem extends Component  {    
  handlePlayingStatus = () => {
    this.seekToPoint();
...
  }

  seekToPoint = () => {
    this.player.seekTo(30); // this worked - seek to f.ex. 30s
  }

  render() {
    const { playingStatus, videoId } = this.state;
    return (
      <Fragment>
        <ReactPlayer
          ref={player => { this.player = player; }}
          url="https://player.vimeo.com/video/318298217"
        />
        <button onClick={this.handlePlayingStatus}>Seek to</button>
      </Fragment>
    );
  }
}

So I want to get ref from the player and use a seek function on that. This works just fine but I have a problem to change it to hooks code. 

const VideoItem = () => {    
  const player = useRef();

  const handlePlayingStatus = () => {
    seekToPoint();
...
  }

  const seekToPoint = () => {
    player.seekTo(30); // this does not work
  }

    return (
      <Fragment>
        <ReactPlayer
          ref={player}
          url="https://player.vimeo.com/video/318298217"
        />
        <button onClick={handlePlayingStatus}>Seek to</button>
      </Fragment>
    );
}

How can I remodel it?

Upvotes: 3

Views: 5033

Answers (2)

kk_360
kk_360

Reputation: 55

useRef is a hook function that gets assigned to a variable, inputRef, and then attached to an attribute called ref inside the HTML element you want to reference.

Pretty easy right?

React will then give you an object with a property called current.

The value of current is an object that represents the DOM node you’ve selected to reference.

So after using useRef player contains current object, and inside current object, your all methods from vimeo player would be available(in your case seekTo(number))

so you should be using player.current.seekTo(30) instead.

refer this to know more about useRef.

Upvotes: 1

Felix Kling
Felix Kling

Reputation: 816424

From the documentation:

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

Thus your code should be:

player.current.seekTo(30);

(optionally check whether player.current is set)

useCallback might also be interesting to you.

Upvotes: 8

Related Questions