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:

import React from 'react';

import AccountTypes from '../data/AccountType';



const AccountTypeSelect = (props) => {  

  return (

    <select id={props.id} className = {props.classString} style={props.styleObject}>

        <option value=nothingSelected defaultValue>--Select--</option>

        {

            $.each(AccountTypes, function(index) {

                <option val={this.id}>this.name</option>

            })

        }

    </select>

  );

};



export default AccountTypeSelect;

I received this error in the console from the above code:

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 AccountTypeSelect.

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?