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',
@@ -20,16 +20,17 @@ const PopularArtists = () => {
     .then(artists => setArtists(artists));
     return <EntityList placeholder={true} size={4}/>
   } else {
-    const items = artists.map((artist) => ({
+    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': <span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>
-  }));
-  const list = [{
-    'items': items
-  }];
+        'widget': widget
+      }
+    });
+    const list = [{'items': items}];
     return <EntityList list={list}/>
   }
 }
@@ -47,13 +48,17 @@ const PopularDiscs = () => {
     .then(discs => setDiscs(discs));
     return <EntityList placeholder={true} size={4}/>
   }else {
-    const items = discs.map((disc) => ({
-      'cover': <CoverArt disc={disc} size={2}/>,
+    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': <span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>
-}));
+        'widget': widget
+      }
+    });
     const list = [{
       'items': items
     }];
@@ -74,13 +79,16 @@ const PopularSongs = () => {
     .then(songs => setSongs(songs));
     return <EntityList placeholder={true} size={4}/>
   }else {
-    const items = songs.map((song) => ({
+    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': <span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>
-  }));
+        'widget': widget
+      }
+    });
     const list = [{
       'items': items
     }];
@@ -103,12 +111,10 @@ export const Recomended = () => {
           <PopularSongs/>
         </Col>
       </Row>
-      <Row>
-        <Col>
+      <RowCol>
         <h3>Discos Populares</h3>
         <PopularDiscs/>
-        </Col>
-      </Row>
+      </RowCol>
     </Grid>
   )
 }