Recomended tenia mala la indentacion, ya no

Era por que el editor no sabe que hacer con jsx dentro de un objeto

src/views/Recomended.jsx

@@ -5,7 +5,7 @@ import {getArtist, getDisc, getSong} from '../services/entity_service';
 
 import {EntityList} from '../components/EntityList';
 import {CoverArt} from '../components/CoverArt';
-import {Grid, Row, Col} from '../components/Grid';
+import {Grid, Row, Col, RowCol} from '../components/Grid';
 
 const PopularArtists = () => {
   const artistIDs = ['fa3b825f-7c85-4377-b393-d28a2016e293', 'b2d122f9-eadb-4930-a196-8f221eeb0c66',
@@ -19,19 +19,20 @@ const PopularArtists = () => {
     getArtist(artistIDs[3])])
     .then(artists => setArtists(artists));
     return <EntityList placeholder={true} size={4}/>
-  }else {
-    const items = artists.map((artist) => ({
-      'cover': null,
-      'link': `/artist/${artist.id}`,
-      'title': artist.name,
-      'subtitle': [artist.type, artist.country].filter(Boolean).join(' - '),
-      'widget': <span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>
-  }));
-  const list = [{
-    'items': items
-  }];
-  return <EntityList list={list}/>
-}
+  } else {
+    const items = artists.map((artist) => {
+      const widget = (<span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>);
+      return {
+        'cover': null,
+        'link': `/artist/${artist.id}`,
+        'title': artist.name,
+        'subtitle': [artist.type, artist.country].filter(Boolean).join(' - '),
+        'widget': widget
+      }
+    });
+    const list = [{'items': items}];
+    return <EntityList list={list}/>
+  }
 }
 
 const PopularDiscs = () => {
@@ -47,18 +48,22 @@ const PopularDiscs = () => {
     .then(discs => setDiscs(discs));
     return <EntityList placeholder={true} size={4}/>
   }else {
-    const items = discs.map((disc) => ({
-      'cover': <CoverArt disc={disc} size={2}/>,
-    'link': `/disc/${disc.id}`,
-    'title': disc.title,
-    'subtitle': disc.artist.name,
-    'widget': <span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>
-}));
-const list = [{
-  'items': items
-}];
-return <EntityList list={list}/>
-}
+    const items = discs.map((disc) => {
+      const cover = (<CoverArt disc={disc} size={2}/>);
+      const widget = (<span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>)
+      return {
+        'cover': cover,
+        'link': `/disc/${disc.id}`,
+        'title': disc.title,
+        'subtitle': disc.artist.name,
+        'widget': widget
+      }
+    });
+    const list = [{
+      'items': items
+    }];
+    return <EntityList list={list}/>
+  }
 }
 
 const PopularSongs = () => {
@@ -74,18 +79,21 @@ const PopularSongs = () => {
     .then(songs => setSongs(songs));
     return <EntityList placeholder={true} size={4}/>
   }else {
-    const items = songs.map((song) => ({
-      'cover': null,
-      'link': `/song/${song.id}`,
-      'title': song.title,
-      'subtitle': song.artist.name,
-      'widget': <span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>
-  }));
-  const list = [{
-    'items': items
-  }];
-  return <EntityList list={list}/>
-}
+    const items = songs.map((song) => {
+      const widget = (<span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>);
+      return {
+        'cover': null,
+        'link': `/song/${song.id}`,
+        'title': song.title,
+        'subtitle': song.artist.name,
+        'widget': widget
+      }
+    });
+    const list = [{
+      'items': items
+    }];
+    return <EntityList list={list}/>
+  }
 }
 
 export const Recomended = () => {
@@ -103,12 +111,10 @@ export const Recomended = () => {
           <PopularSongs/>
         </Col>
       </Row>
-      <Row>
-        <Col>
-          <h3>Discos Populares</h3>
-          <PopularDiscs/>
-        </Col>
-      </Row>
+      <RowCol>
+        <h3>Discos Populares</h3>
+        <PopularDiscs/>
+      </RowCol>
     </Grid>
   )
 }