1 file modified with body content

_UseFetch.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const useFetch = (url, options) => {
+
+  const [items, setItems] = React.useState([]);
+  const [error, setError] = React.useState(null);
+
+  React.useEffect(() => {
+    const fetchItems = async () => {
+      try {
+        const res = await fetch(url, options);
+        const items = await res.json();
+        setItems(items);
+      } catch (error) {
+        setError(error);
+      }
+    };
+    fetchItems();
+  }, [url, options]);
+
+  return { items, error };
+}
+
+export default useFetch;

index.js

@@ -1,29 +1,25 @@
 import React, { Component } from 'react';
 import { render } from 'react-dom';
-import Hello from './Hello';
-import Title from './Title';
+import useFetch from './_UseFetch';
 import './style.css';
 
-class App extends Component {
-  constructor() {
-    super();
-    this.state = {
-      name: 'React',
-      title: 'My first stackblitz app'
-    };
-  }
+function MyComponent() {
+  const res = useFetch('https://jsonplaceholder.typicode.com/albums', {});
 
-  render() {
-    return (
-      <div>
-        <Hello name={this.state.name} />
-        <Title title={this.state.title} />
-        <p>
-          Start editing to see some magic happen :)
-        </p>
-      </div>
-    );
-  }
+  if (res.error) return <div>Error: {res.error.message}</div>;
+  if (!res.items) return <div>Loading...</div>;
+
+  return (
+    <ul>
+      {res.items.map(item => {
+        const { id, userId, title } = item;
+        <li key={id}>
+          <p>Album: {id} user: {userId}</p>
+          <p>title: {title} </p>
+        </li>
+      })}
+    </ul>
+  );
 }
 
-render(<App />, document.getElementById('root'));
+render(<MyComponent />, document.getElementById('root'));