Challenge and Code: Stories Component

react-hooks/home/src/App.js

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import Joke from './Joke';
+import Stories from './Stories';
 
 function App() {
   const [userQuery, setUserQuery] = useState('');
@@ -33,6 +34,8 @@ function App() {
       </div>
       <hr />
       <Joke />
+      <hr />
+      <Stories />
     </div>
   );
 }

react-hooks/home/src/Stories.js

@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+
+function Stories() {
+  const [stories, setStories] = useState([]);
+
+  useEffect(() => {
+    fetch('https://news-proxy-230704.appspot.com/topstories')
+      .then(response => response.json())
+      .then(json => setStories(json));
+  }, []);
+
+  return (
+    <div className='Stories'>
+      <h3>Stories</h3>
+      {
+        stories.map(story => {
+          const { id, by, time, title, url } = story;
+
+          return (
+            <div key={id}>
+              <a href={url}>{title}</a>
+              <div>{by} - {new Date(time * 1000).toLocaleString()}</div>
+            </div>
+          );
+        })
+      }
+    </div>
+  )
+}
+
+export default Stories;