Full-Stack React Projects - Second Edition

The MediaList component

The MediaList component is a reusable component that will take a list of media and iterate through it to render each media 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.

In the view part of the MediaList component, we will iterate through the media array that's received in props using map, as shown in the following code.

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

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