title: Looping through a Map in React
body: <p>I have a <code>Map</code> object:</p>
  
  <pre><code>let dateJobMap = new Map();
  
  for (let jobInArray of this.state.jobs) {
    let deliveryDate: Date = new Date(jobInArray.DeliveryDate);
    let deliveryDateString: string = deliveryDate.toLocaleDateString("en-US");
  
    if (dateJobMap.has(deliveryDateString)) {
      let jobsForDate: IDeliveryJob[] = dateJobMap.get(deliveryDateString);
      jobsForDate.push(jobInArray);
    }
    else {
      let jobsForDate: IDeliveryJob[] = [jobInArray];
      dateJobMap.set(deliveryDateString, jobsForDate);
    }
  }
  </code></pre>
  
  <p>In my <code>render</code> method, I want to call a TruckJobComp object for each delivery job in the value's array to display it:</p>
  
  <pre><code>        &lt;div className={ styles.column }&gt;
            &lt;p className={ styles.description }&gt;{escape(this.props.description)}&lt;/p&gt;
  
            {
              dateJobMap.forEach(function(jobsForDate, dateString) {
                jobsForDate.map(job =&gt; (
                  &lt;TruckJobComp job = { job } /&gt;
                ))
              })
            }
          &lt;/div&gt;
  </code></pre>
  
  <p>This seems like it should work but doesn't.  It never creates a TruckJobComp.  I do a <code>.forEach</code> iteration on my <code>Map</code>, and for each <code>value</code>'s <code>array</code>, I use <code>.map</code> to get the individual job object to send to TruckJobComp object.</p>
  
  <p>When I create a temp <code>array</code> to grab the jobs from the last loop:</p>
  
  <pre><code>let tempJobs: IDeliveryJob[];
  </code></pre>
  
  <p>and in the loop add in: </p>
  
  <pre><code>  if (dateJobMap.has(deliveryDateString)) {
      let jobsForDate: IDeliveryJob[] = dateJobMap.get(deliveryDateString);
      jobsForDate.push(jobInArray);
  
      tempJobs = jobsForDate;
    }
  </code></pre>
  
  <p>and then use that <code>array</code> in the render:</p>
  
  <pre><code>          &lt;div className={ styles.column }&gt;
              &lt;p className={ styles.description }&gt;{escape(this.props.description)}&lt;/p&gt;
              {
                tempJobs.map(job =&gt; (
                  &lt;TruckJobComp job = { job }/&gt;
                ))
              }
            &lt;/div&gt;
  </code></pre>
  
  <p>It displays as expected.</p>
  
  <p>I do have a warnings in Visual Studio Code:</p>
  
  <pre><code>Warning - tslint - ...\TruckDeliverySchedule.tsx(104,38): error no-function-expression: Use arrow function instead of function expression
  </code></pre>
  
  <p>I don't know enough to understand.  Line 104 corresponds with:</p>
  
  <pre><code>dateJobMap.forEach(function(jobsForDate, dateString) {
  </code></pre>
  
  <p>I am very new to this so I'm not 100% sure how most of this works.  Just trying to put pieces I've learned together to get things to work.</p>
  
  <p>Second Edit:</p>
  
  <p>
      {escape(this.props.description)}</p></p>
  
  <pre><code>{
    [...dateJobMap.keys()].map(jobsForDate =&gt; // line 154
      jobsForDate.map(job =&gt; (
        &lt;TruckJobComp job = { job } /&gt;
      ))
    )
  }
  </code></pre>
  
  <p></p>
  
  <p>Produces error:</p>
  
  <pre><code>[09:06:56] Error - typescript - src\...\TruckDeliverySchedule.tsx(154,27): error TS2461: Type 'IterableIterator&lt;any&gt;' is not an array type.
  </code></pre>