title: ReactJS Fetch User Data from API and add to table
body: <p>I'm using <code>react hooks</code> to fetch data from an API and I want to display it in a table. Seemingly very simple, but I'm missing something. <strong>The problem is that no data is being rendered in the <code>&lt;table&gt;</code>.</strong></p>
  
  <p>Also, I want to know if I'm even remotely on the right track in how this should all be done. Please correct me if I'm heading in the wrong direction in terms of best practices.</p>
  
  <p><strong>./app.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  import { BrowserRouter, Route, Switch } from 'react-router-dom';
  import Header from './components/Header';
  import UserList from './components/UserList';
  
  export default function App() {  
  
      return (
          &lt;BrowserRouter&gt;
              &lt;Header /&gt;
              &lt;Switch&gt;
                  &lt;Route exact path='/' component={UserList} /&gt;
              &lt;/Switch&gt;
              {/* &lt;Sidebar /&gt; */}
          &lt;/BrowserRouter&gt;            
      );
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('app'));
  </code></pre>
  
  <p><strong>./helpers/FetchData/FetchData.js</strong></p>
  
  <pre><code>import React from 'react';
  
  
  export const useFetch = (url, options) =&gt; {
      const [response, setResponse] = React.useState({});
      const [error, setError] = React.useState({});
      React.useEffect(() =&gt; {
        const fetchData = async () =&gt; {
          try {
            const res = await fetch(url, options);
            const json = await res.json();
            setResponse(json);
          } catch (error) {
            setError(error);
          }
        };
        fetchData();
      }, []);
      return { response, error };
  };
  </code></pre>
  
  <p><strong>./components/UserList/UserList.js</strong></p>
  
  <pre><code>import React from 'react'
  import { useFetch } from '../../helpers/FetchData';
  
  export default function UserList() {
      const res = useFetch('https://randomuser.me/api', {});
  
      if(!res.response.results) {
          return &lt;div&gt;Loading...&lt;/div&gt;
      }
  
      const data = res.response.results;
      console.log(data);
  
      return (
          &lt;table className="table table-striped table-dark"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th scope="col"&gt;#&lt;/th&gt;
              &lt;th scope="col"&gt;First&lt;/th&gt;
              &lt;th scope="col"&gt;Last&lt;/th&gt;
              &lt;th scope="col"&gt;City&lt;/th&gt;
              &lt;th scope="col"&gt;State&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              {data &amp;&amp; data.map(row =&gt; {
                  &lt;tr&gt;
                      &lt;th scope="row" key={row.id}&gt;{row.id}&lt;/th&gt;
                      &lt;td&gt;{row.name.first}}&lt;/td&gt;
                      &lt;td&gt;{row.name.last}&lt;/td&gt;
                      &lt;td&gt;{row.location.city}&lt;/td&gt;
                      &lt;td&gt;{row.location.state}&lt;/td&gt;
                  &lt;/tr&gt;
              })}    
          &lt;/tbody&gt;
        &lt;/table&gt;
      )
  }
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>This is the result of the <code>console.log(data)</code> statement in the UserList component, so I know there is data getting returned:</p>
  
  <p><a href="https://i.stack.imgur.com/BcElH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BcElH.png" alt="enter image description here"></a></p>