title: How to map an object's keys to make JSON easier to handle in React
body: <p>If I have this JSON:</p>
  
  <pre><code>{
      'name': 'Active user',
      'config': {
          'status': 'active',
      }
  },
  {
      'name': 'Paused user',
      'config': {
          'status': 'active',
      }
  }
  </code></pre>
  
  <p>Then I can render a React component and access the data easily:</p>
  
  <pre><code>render: function() {
      var panels = [];
  
      this.props.accounts.forEach(function(account) {
          panels.push(
              &lt;Tabs.Panel title={account.name}&gt;
                  &lt;h2&gt;{account.name}&lt;/h2&gt;
              &lt;/Tabs.Panel&gt;
          );
      });
  
      return (&lt;Tabs&gt;{panels}&lt;/Tabs&gt;);
  }
  ...
  React.render(&lt;Tabs accounts={ACCOUNTS} /&gt;, document.body);
  </code></pre>
  
  <p>If my JSON is structured as below instead, how should I re-factor the <code>render</code> function to work as I want?</p>
  
  <pre><code>{
      'Active User': {
          'config': {
              'status': 'active',
          }
      },
      'Paused User': {
          'config': {
              'status': 'paused',
          }
      }
  }
  </code></pre>
  
  <p>i.e. I no longer have a <code>name</code> attribute to display. </p>