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 {
+  } 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>
+        'widget': widget
-  }));
+      }
-  const list = [{
+    });
-    'items': items
+    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) => ({
+    const items = discs.map((disc) => {
-      'cover': <CoverArt disc={disc} size={2}/>,
+      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 = [{
+    });
+    const list = [{
       'items': items
-}];
+    }];
-return <EntityList list={list}/>
+    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) => ({
+    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
     }];
     return <EntityList list={list}/>
-}
+  }
 }
 
 export const Recomended = () => {
@@ -103,12 +111,10 @@ export const Recomended = () => {
           <PopularSongs/>
         </Col>
       </Row>
-      <Row>
+      <RowCol>
-        <Col>
         <h3>Discos Populares</h3>
         <PopularDiscs/>
-        </Col>
+      </RowCol>
-      </Row>
     </Grid>
   )
 }