React.jsを使用してJSXでオブジェクトをループする方法

Question

React.jsコンポーネントがあり、HTMLオプションを追加するためにインポートするオブジェクトをループしたいと思います。ここでは醜いの両方で、動作しない、私が試したものです：

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; 

私は上記のコードからコンソールにこのエラーを受け取っ：

invariant.js 4599：38 - キャッチされない不変違反？：オブジェクトはReactの子としては無効です（found：キー{id、name、enabled、additionalInfo}のオブジェクト）。子コレクションをレンダリングする場合は、代わりに配列を使用するか、ReactアドオンのcreateFragment（オブジェクト）を使用してオブジェクトをラップします。レンダリング方法がAccountTypeSelectであることを確認します。

実際には、各オブジェクトを配列に変換するか、createFragmentでラップして使用する必要がありますか？この場合のベストプラクティスは何ですか？

Answer 1

代わりの$.each使用map：

は

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

Answer 2

あなたがループにマップを使用する必要があります。子供たちのリストをレンダリングするための

{AccountTypes.map((accountType) => 
    <option value={accountType.id}>{accountType.name}</option>)} 

Answer 3

は、あなたはとてもレンダリングしますリアクトそれぞれの子供のためのkey属性を追加する必要がありますこれを正しく実行してください。

JQueryマップ（関数プログラミングに適しています）

01法線マップで

{ 
     $.map(AccountTypes, function(type,index) { 
      return <option key={type.id} val={type.id}>type.name</option> 
     }) 
    } 

：

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