title: Object.entries.map to render react components array
body: <p>I am developing a React web app. Until now, I always stored data in an array like such:</p>
  
  <pre><code>areas: [
      { id: 0, title: 'Some title', isSelected: false }
  ]
  </code></pre>
  
  <p>Then I could just do</p>
  
  <pre><code>this.state.areas.map(x =&gt; &lt;Component key={x.id} ... /&gt;
  </code></pre>
  
  <p>However after going over the Redux docs, I see an advantage is storing data like so:</p>
  
  <pre><code>areas: {
    'some title': { id: 0, isSelected: false }
  }
  </code></pre>
  
  <p>This makes it super easy to update the currently selected area by doing</p>
  
  <pre><code>this.state.areas['some title].isSelected = true
  </code></pre>
  
  <p>As opposed to doing .filter by the id, then updating <code>isSelected</code>.</p>
  
  <p>However, storing using object keys instead of an array means I have to write:</p>
  
  <pre><code> { 
     Object.entries(this.props.areas).map(([k, v]) =&gt; {
       return &lt;Component key={k.id} ... /&gt;
     })
   }
  </code></pre>
  
  <p>Which is a lot less readable, and a lot more typing.</p>
  
  <p>So my question is:</p>
  
  <ol>
  <li>Is there a nicer way than <code>Object.entries...</code> to achieve what I'm doing? Or is there a better way?</li>
  <li>Should I just be using an array in the first place? </li>
  </ol>
  
  <p>Thanks.</p>