Attempting to reduce output of Migrations to workable numbers

src/components/App.js

@@ -9,7 +9,7 @@ class App extends Component {
     this.state = {
       migs1: {
         type: 'top-headlines',
-        query: 'country=au'
+        query: 'migration_status'
       },
       migs2: {
         type: 'top-headlines',

src/components/Migrations/MigrationSingle.js

@@ -6,11 +6,10 @@ const MigrationSingle = ({ item }) => (
         <div className="card-panel">
             <div className="card-content black-text">
                 <ul className="collection with-header">
-                    <li className="collection-header"><p>{item.migration_status}</p></li>
+                    <li className="collection-header"><a href={item.id}><p>{item.migration_status}</p></a></li>
                     <li className="collection-item">{item.domain}</li>
                     <li className="collection-item">{item.booked_time}</li>
                     <li className="collection-item">{item.migration_status}</li>
-                    <li className="collection-item">{item.id}</li>
                 </ul>
 
             </div>

src/components/Migrations/Migrations.js

@@ -44,9 +44,13 @@ class Migrations extends Component {
 
     render() {
         return (
-            <div className="row">
-                {this.renderItems()}
-            </div>
+            <div>
+            {this.state.migs.filter(mig => mig.migration_status = ('Booked')).map(filteredMig => (
+                <div className="col s3">
+                {filteredMig.migration_status}
+                </div>
+            ))};
+          </div>
         );
     }
 }