Tylerlee12 Tylerlee12 - 1 year ago 197
React JSX Question

How to loop through object in JSX using React.js

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>

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

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?

Answer Source

Instead of $.each use map:

{AccountTypes.map(function(a) {
     return (
         <option key={a.id} val={a.id}>{a.name}</option>