Full-Stack React Projects

MediaList component

The MediaList component is a reusable component that will take a list of media and iterate through it to render each item in the view. In MERN Mediastream, we use it to render a list of the most popular media in the home view and a list of media uploaded by a specific user in their profile.

mern-mediastream/client/media/MediaList.js:

<GridList cols={3}>   {this.props.media.map((tile, i) => (        <GridListTile key={i}>          <Link to={"/media/"+tile._id}>            <ReactPlayer url={'/api/media/video/'+tile._id}                          width='100%' height='inherit'/>          </Link>          <GridListTileBar             title={<Link to={"/media/"+tile._id}>{tile.title}</Link>}            subtitle={<span>{tile.views} views                   <span style={{float: 'right'}}>{tile.genre}</span>}/>        </GridListTile>    ))}</GridList> ...