Thumbnail mosaico em cards coleção

src/Components/AreasSubPages.js

@@ -74,13 +74,13 @@ class ReqCollections extends Component{
     return(
       <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
       <Row style={{paddingBottom: "5px"}}>
-      {row1.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} author={card.owner.name} description={card.description} thumbnail={card.itens_thumbnail}/></Col>)}
+      {row1.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} author={card.owner.name} description={card.description} thumbnail={card.items_thumbnails}/></Col>)}
       </Row>
       <Row>
-      {row2.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} author={card.owner.name} description={card.description} thumbnail={card.itens_thumbnail}/></Col>)}
+      {row2.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} author={card.owner.name} description={card.description} thumbnail={card.items_thumbnails}/></Col>)}
       </Row>
       <Row>
-      {row3.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} author={card.owner.name} description={card.description} thumbnail={card.itens_thumbnail}/></Col>)}
+      {row3.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} author={card.owner.name} description={card.description} thumbnail={card.items_thumbnails}/></Col>)}
       </Row>
     </Carousel>
     )

src/Components/CollectionCard.js

 import React, {Component} from 'react';
 import './CardsAnimation.css';
-import {Container} from 'react-grid-system';
+import {apiDomain} from '../env';
+import {Col,Row, Container, Hidden, Visible} from 'react-grid-system';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import CardActions from '@material-ui/core/CardActions';
@@ -10,6 +11,7 @@ import FolderIcon from '@material-ui/icons/Folder';
 import FavoriteIcon from '@material-ui/icons/Favorite';
 import StarRatings from 'react-star-ratings';
 import algumaCoisa from "../img/laranja/LIVRO_DIGITAL.jpg";
+
 var authorStyle={
   position: "absolute",
   display: "flex",
@@ -29,12 +31,26 @@ var pictureStyle={
   height: "50px",
 };
 
+class RenderThumbs extends Component {
+  render(){
+    if (this.props.thumbs) {
+      var array = this.props.thumbs.slice(0,4);
+    return(
+      <div>
+      <Row>
+        {array.map(thumb => <Col style={{padding: "0px"}} md={6}><img key={thumb.id} height="80" src={apiDomain+thumb}/> </Col>)}
+      </Row>
+      </div>
+    );
+    }
+    return(null);
+  }
+}
 class CollectionCard extends Component {
-  constructor(props) {
+  constructor(props){
     super(props);
     this.state={
-      thumbnail: algumaCoisa,
-      userStyle: "animation",
+      userStyle: "animation"
     };
   }
   onHover(){
@@ -47,13 +63,13 @@ class CollectionCard extends Component {
    return (
      <Card onMouseOver={this.onHover.bind(this)} onMouseOut={this.onIddle.bind(this)} >
      <Container style={{padding:"0px", backgroundColor: "#673ab7"}}>
+     <RenderThumbs thumbs={this.props.thumbnail}/>
      <div style={authorStyle}>
       <Typography  variant="body2" color="textSecondary" component="p">{this.props.author}</Typography>
       <Typography variant="title" color="textSecondary" component="p" >{this.props.name}</Typography>
        </div>
      <div style={pictureStyle}> fotinha </div>
      <div className={this.state.userStyle}>{this.props.author}</div>
-     <img src={this.state.thumbnail} alt="thumbnail do recurso"/>
 
      </Container>
        <CardContent style={{height: "60%", textAlign: "left", paddingBottom: "0px"}}>