title: mapping of an empty array, error checking logic
body: <p>I am new to react and a question on how to handle empty arrays. I have some data on a specific class. The class data can be seen below. I am trying to display the data in my web app but I have having trouble with the logic of mapping array when they are empty.</p>
  <p>a simplified version of my code is shown below:</p>
  <pre><code>import React from 'react';
  import { useState, useEffect } from &quot;react&quot;;
  
  const data = {
    ece1004: {
      number: &quot;ECE 1004&quot;,
      name: &quot;Introduction to ECE Concepts&quot;,
      des: &quot;Introduction to topics that span the field of electrical and computer engineering (ECE). Content presented through the lens of application with accompanying hands-on exercises. Basics of circuits, op-amps, power supplies, computer logic, system decomposition, and coding. Modeling and application of engineering professionalism. Exploration of ECE in society.&quot;,
      pre: [[&quot;ENGE 1215&quot;, &quot;ECE 1414&quot;]],
      co: [],
      minGrade: &quot;C&quot;,
      offering: [&quot;Fall&quot;, &quot;Spring&quot;, &quot;Summer&quot;],
    }
  };
  
  function ECE1004() { 
      const [data, setData]  = useState([]);
  
      const fetchClassObj = () =&gt; {
          setData(data);
      }
      useEffect(() =&gt; {
          fetchClassObj();
      },[]);
  
      return (
          &lt;&gt;   
              &lt;div&gt;
                  {data.co ? 
                      data.co.map(coreq =&gt; {
                      return(      
                      &lt;div className=&quot;classDes&quot;&gt;
                          Coreqs: {coreq.join(', ')}
                      &lt;/div&gt;
                      )
                  }) : &lt;h3&gt;No data yet&lt;/h3&gt; }
                  
              &lt;/div&gt;             
          &lt;/&gt;
      )
  
  }
  
  export default ECE1004
  </code></pre>
  <p>I would like the class data to be displayed all in separate divs. For example, if I wrote the same code for the prereqs, it would display as &quot;Prereqs: ECE 1215, ECE 1414&quot; with a comma inbetween (hence the <code>.join(', ')</code> function).
  However, since the co member of the data is empty the mapping function is not recognized. I was wondering what the logic is to check if the array is empty as well as use the <code>.join(', ')</code> function.
  I have tried not mapping the data and using <code>{data.co.length ? 'coreqs' + data.co.join(', ') : 'coreqs: None'}</code> but then the <code>.join(', ')</code> is not recognized.
  Any help would be appreciated, thank you.</p>