title: Wait for API call data before render react hooks
body: <p>I make an API call.</p>
  
  <p>It appears React goes ahead to build a table without the data, thus throwing error of </p>
  
  <p><code>Uncaught TypeError: Cannot read property 'map' of undefined</code></p>
  
  <p>Here's what I'm doing</p>
  
  <p><code>useEffect()</code> pretty straightforward</p>
  
  <pre><code>  const [data, setData] = useState();
    const [isBusy, setBusy] = useState()
  
    useEffect(() =&gt; {
      setBusy(true);
      async function fetchData() {
        const url = `${
          process.env.REACT_APP_API_BASE
          }/api/v1/endpoint/`;
  
        axios.get(url).then((response: any) =&gt; {
          setBusy(false);
          setData(response.data.results)
          console.log(response.data.results);
        });
      }
  
      fetchData();
    }, [])
  </code></pre>
  
  <p>Then I'm trying to render a table using the data from the API call above (as and when it becomes available)</p>
  
  <pre><code>            &lt;div className="col-md-12 mt-5"&gt;
                {isBusy ? (
                  &lt;Loader /&gt;
                ) : (
                    &lt;table className="table table-hover"&gt;
                      &lt;thead&gt;
                        &lt;tr&gt;
                          &lt;th scope="col"&gt;Pharmacy User Full Name&lt;/th&gt;
                          &lt;th scope="col"&gt;Tests This Month&lt;/th&gt;
                          &lt;th scope="col"&gt;Tests This Week&lt;/th&gt;
                          &lt;th scope="col"&gt;Last Test Date&lt;/th&gt;
                        &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                        {data.map((item: any, index: any) =&gt; {
                          return (&lt;tr&gt;
                            &lt;th scope="row" key={index}&gt;{item.name}&lt;/th&gt;
                            &lt;td&gt;Mark&lt;/td&gt;
                            &lt;td&gt;Otto&lt;/td&gt;
                            &lt;td&gt;@mdo&lt;/td&gt;
                          &lt;/tr&gt;
                          )
                        })}
  
                      &lt;/tbody&gt;
                    &lt;/table&gt;
                  )}
              &lt;/div&gt;
  </code></pre>
  
  <p>The above appears intuitive enough for me. So not sure what I need to do. Thanks.</p>