1 files changed, 24 insertions, 19 deletions
diff --git a/frontend/src/UserList.js b/frontend/src/UserList.js
index dd17ace..59c6425 100644
--- a/frontend/src/UserList.js
+++ b/frontend/src/UserList.js
@@ -1,6 +1,29 @@
 import React, { useEffect, useState } from 'react';
 import axios from './axios';
 
+const Table = ({ users }) => {
+  const userRows = !!users
+    ? users.map(user => (
+        <tr key={user.id}>
+          <td>{user.id}</td>
+          <td>{user.username}</td>
+        </tr>
+      ))
+    : null;
+
+  return (
+    <table className="table">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Username</th>
+        </tr>
+      </thead>
+      <tbody>{userRows}</tbody>
+    </table>
+  );
+};
+
 const UserList = () => {
   const [ data, setData ] = useState({});
   useEffect(() => {
@@ -22,16 +45,6 @@ const UserList = () => {
     })();
   }, []);
 
-  const users = data.users;
-  const userRows = !!users
-    ? users.map(user => (
-        <tr key={user.id}>
-          <td>{user.id}</td>
-          <td>{user.username}</td>
-        </tr>
-      ))
-    : null;
-
   return (
     <div>
       <h2 className="subtitle">User list</h2>
@@ -39,15 +52,7 @@ const UserList = () => {
         <div className="error" key="error">
           {data.error}
         </div>
-        <table className="table">
-          <thead>
-            <tr>
-              <th>ID</th>
-              <th>Username</th>
-            </tr>
-          </thead>
-          <tbody>{userRows}</tbody>
-        </table>
+        {!data.error && <Table users={data.users} />}
       </div>
     </div>
   );