title: How can I sort the Array map() function output in Javascript
body: <p>I want to sort items after using map() function. 
  But the sorting must be based on a specific item's property.
  Then how I can customize the index before I pass it to "key"?</p>
  
  <p>Here the response from the API</p>
  
  <pre><code>[
    {
      "typeId": 2,
      "count": 410
    },
    {
      "typeId": 3,
      "count": 2
    },
    {
      "typeId": 4,
      "count": 19
    },
    {
      "typeId": 5,
      "count": 21
    },
    {
      "typeId": 6,
      "count": 1
    },
    {
      "typeId": 7,
      "count": 80
    }
     ...
  ]
  </code></pre>
  
  <p>Data exploitation </p>
  
  <pre><code> &lt;div className="top-error-ctn"&gt;
    &lt;span className="heading"&gt;Top Errors&lt;/span&gt;
    &lt;p&gt;
      Sorted By Type
    &lt;/p&gt;
    &lt;div className="row"&gt;
       {Sometest ? (
         all.slice(0, 6).map((all, index) =&gt; {
            return &lt;ErrorBar key={index} all={all} /&gt;;
         })
       ) : (
         &lt;span&gt;Nothing to see&lt;/span&gt;
       )}
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Data Rendering</p>
  
  <pre><code>&lt;div&gt;
    &lt;div className="side"&gt;
      &lt;div&gt;{all.typeId}&lt;/div&gt;
    &lt;/div&gt;
    &lt;div className="middle"&gt;
      &lt;div className="bar-container"&gt;
        &lt;div className="bar-5"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div className="side right"&gt;
      &lt;div&gt;{all.count}&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>