frontend/src/components/RandomTopic.js

import Grid from 'react-css-grid'
import React from 'react';
import PropTypes from 'prop-types';
import VideoItem from "./VideoItem";
import SectionHeading from "./SectionHeading";

class RandomTopic extends React.Component {

  render() {
    return (
      <section>
        <SectionHeading title={ this.props.topicName } />
        <Grid
          width={450}
          gap={16}>
          { this.props.videos.map(video => 
            <VideoItem id={ video.id } title={ video.title } />
          )}

        </Grid>
        <a href="/topics">See All videos</a>

      </section>

    )
  }
}

RandomTopic.propTypes = {
  topicName: PropTypes.string,
  videos: PropTypes.array,
  loading: PropTypes.bool
};

export default (RandomTopic);