title: Javascript Map a Collection
body: <p><strong>The Issue:</strong></p>
  
  <p>I'm attempting to build a simple search tool.  It returns a search query by matching an id to another item with the same id. Without going into the complexities, the issue I'm having is that when my data was organized previously, the map function from javascript returned all the results perfectly. However, now that my data is structured a bit differently (a collection, I think?) ....the ids don't appear to be lining up which causes the wrong search results to show.</p>
  
  <p><strong>The function in question:</strong></p>
  
  <pre><code>const options = this.props.itemIds.map((id) =&gt; (
    &lt;Option key={this.props.itemSearchList[id].id}&gt;
       {this.props.itemSearchList[id].name}
    &lt;/Option&gt;
  ));
  </code></pre>
  
  <p><em>When the data was structured like this it worked as expected:</em></p>
  
  <p><strong>Example of previous structure:</strong></p>
  
  <pre><code>const items = [
    {
      id: 0,
      name: "name 0",
      tags: ['#sports', '#outdoor', '#clothing'],
    },
    {
      id: 1,
      name: "name 1",
      tags: ['#sports', '#outdoor', '#clothing'],
    },
    {
      id: 2,
      name: "Name 2",
      tags: ['#sports', '#outdoor', '#clothing'],
    },
  </code></pre>
  
  <p><em>Now that the data is a ?collection...the map function doesn't work as anticipated and it returns improper results or none at all:</em>  I've been able to use the lodash Map function on this structure successfully in the past.</p>
  
  <p><strong>Here's a screenshot of the new data:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/EIyYw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EIyYw.png" alt="enter image description here"></a></p>
  
  <p><strong>I believe a representative way to write out the example would be:</strong></p>
  
  <pre><code>const newItems = [
    0: {
      id: 0,
      name: "name here",
    },
    1: {
      id: 1,
      name: "name here",
    },
  ]
  </code></pre>
  
  <p>Any recommendations for making this work or need more info?  Perhaps I'm misunderstanding the issue entirely, but I believe it has to do with data structure and the map function from JS.  I can see results returning, but the id's are not lining up appropriately anymore.</p>
  
  <p>Here's a visual representation of the misalignment.  The orange is the search input and it pulling the right result.  The green is the misalignment of what it's actually showing because of the data structure and mapping (I assume).  </p>
  
  <p><a href="https://i.stack.imgur.com/ObVy1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ObVy1.png" alt="enter image description here"></a></p>