title: How to loop through object in JSX using React.js
body: <p>So I have a React.js component, and I want to loop through an object I import to add HTML options to it.  Here is what I tried, which is both ugly and does not work:</p>
  
  <pre><code>import React from 'react';
  import AccountTypes from '../data/AccountType';
  
  const AccountTypeSelect = (props) =&gt; {  
    return (
      &lt;select id={props.id} className = {props.classString} style={props.styleObject}&gt;
          &lt;option value="nothingSelected" defaultValue&gt;--Select--&lt;/option&gt;
          {
              $.each(AccountTypes, function(index) {
                  &lt;option val={this.id}&gt;this.name&lt;/option&gt;
              })
          }
      &lt;/select&gt;
    );
  };
  
  export default AccountTypeSelect;
  </code></pre>
  
  <p>I received this error in the console from the above code:</p>
  
  <p>invariant.js?4599:38 - Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {id, name, enabled, additionalInfo}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of <code>AccountTypeSelect</code>.</p>
  
  <p>Do I really need to convert each object into an array or wrap it with createFragment to use it?  What is the best practice for this case?</p>