Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Youtube in React: related videos
export function RelatedVideos(props) {
if (!props.videos || !props.videos.length) {
return <div className='related-videos'/>;
}
// safe because before we check if the array has at least one element
const nextUpVideo = props.videos[0];
const remainingVideos = props.videos.slice(1);
const relatedVideosPreviews = remainingVideos.map(relatedVideo => (
<VideoPreview video={relatedVideo}
key={relatedVideo.id}
pathname='/watch'
search={`?v=${relatedVideo.id}`}
horizontal={true}/>
));
return (
<div className='related-videos'>
<NextUpVideo video={nextUpVideo}/>
{relatedVideosPreviews}
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.