requisições prontas, carrosel quebrado

src/Components/AreasSubPages.js

@@ -31,19 +31,35 @@ const areaStyle={
   minHeight: "150px"
 }
 
-class SubPages extends Component{
+class ReqCards extends Component{
   constructor(props){
     super(props);
-    
+    this.state = {
+      resources: [],
+    };
   }
-  getCards(){
+  componentWillMount(){
     axios.get(`${apiUrl}/learning_objects`+ '?limit=12&sort=["published_at", "desc"]')
-      .then(function(response){
-        console.log(response.data);
-      });
+    .then(res=> {
+      this.setState({resources: res.data});
+      console.log(res.data);
+    });
   }
+  render(){
+    return(
+      <Row>
+      {this.state.resources.map(card => <Col md={3} sm={6} key={card.id}><MediaCard name={card.name} description={card.description}/></Col>)}
+      </Row>
+    )
+  }
+}
+
+class SubPages extends Component{
+  constructor(props){
+    super(props);
+  }
+
   areaRender(){
-    this.getCards();
     switch(this.props.banner){
     case "Recursos":
       return(
@@ -62,21 +78,14 @@ class SubPages extends Component{
                 Recursos mais recentes </p>
               <Hidden sm xs>
               <Carousel showThumbs={false} autoPlay infiniteLoop={true} showStatus={false}>
+
+              <ReqCards/>
               </Carousel>
               </Hidden>
               <Visible sm xs>
               <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
               <Row justify="around" style={{paddingBottom: "50px"}} >
-                {rows}
-                {rows}
-              </Row>
-              <Row justify="around" style={{paddingBottom: "50px"}} >
-                {rows}
-                {rows}
-              </Row>
-              <Row justify="around" style={{paddingBottom: "50px"}} >
-                {rows}
-                {rows}
+                <ReqCards/>
               </Row>
               </Carousel>
               </Visible>
@@ -137,7 +146,6 @@ class SubPages extends Component{
     return(
       <div>
       {this.areaRender()}
-
       </div>
   );
 }

src/Components/Card.js

@@ -18,18 +18,16 @@ import thumbnail from "../img/girassol.jpg"
 //   },
 // };
 
-function RecipeReviewCard() {
-  // const classes = useStyles;
+function RecipeReviewCard(props){
   return (
     <Card>
       <img src={thumbnail} alt="thumbnail do recurso"/>
       <CardContent >
         <Typography variant="title" color="textSecondary" component="p">
-          Girassol
+          {props.name}
         </Typography>
         <Typography variant="caption" color="textSecondary" component="p">
-          This impressive paella is a perfect party dish and a fun meal to cook together with your
-          guests. Add 1 cup of frozen peas along with the mussels, if you like.
+          {props.description}
         </Typography>
       </CardContent>
       <CardActions>