How to correctly implement "back" and "forward"?

Question

React

There are the following components in hierarchy:
- Content
-- ContentPlayer (props: video_id, video_title)
Content receives a playlist with videos. When the user selects something from the playlist, the links change and the ContentPlayer updates the data.
How to implement some kind of pagination? Back and forth?
Thanks in advance!

Answer 1

render() {
  const { playList, slug }  = this.props;
  const index = playList.findIndex(i => i.slug === slug);
  const video = playList[index];
  const prev = playList[index - 1];
  const next = playList[index + 1];
  
  render(
    <div>
      {/* ... */}
      <div>
        {prev && <Link to={`/video/${prev.slug}`}>Prev</Link>}
        {next && <Link to={`/video/${next.slug}`}>Next</Link>}
      </div>
    <div/>
  );
}