React JSX: Итерация через хэш и возврат элементов JSX для каждой клавиши

Question

Я пытаюсь выполнить итерацию всех ключей в хеше, но из цикла не возвращается результат. console.log() выходы, как ожидалось. Любая идея, почему JSX не возвращается и выводится правильно?

var DynamicForm = React.createClass({ 
    getInitialState: function() { 
    var items = {}; 
    items[1] = { name: '', populate_at: '', same_as: '', 
       autocomplete_from: '', title: '' }; 
    items[2] = { name: '', populate_at: '', same_as: '', 
       autocomplete_from: '', title: '' }; 
    return { items }; 
    }, 



    render: function() { 
    return (
     <div> 
     // {this.state.items.map(function(object, i){ 
     //^This worked previously when items was an array. 
     { Object.keys(this.state.items).forEach(function (key) { 
      console.log('key: ', key); // Returns key: 1 and key: 2 
      return (
      <div> 
       <FieldName/> 
       <PopulateAtCheckboxes populate_at={data.populate_at} /> 
      </div> 
      ); 
     }, this)} 
     <button onClick={this.newFieldEntry}>Create a new field</button> 
     <button onClick={this.saveAndContinue}>Save and Continue</button> 
     </div> 
    ); 
    } 

Answer 1

Object.keys(this.state.items).forEach(function (key) { 

Array.prototype.forEach() не возвращает ничего - использовать .map() вместо:

Object.keys(this.state.items).map(function (key) { 
    var item = this.state.items[key] 
    // ... 

Answer 2

ярлык будет:

Object.values(this.state.items).map({ 
    name, 
    populate_at, 
    same_as, 
    autocomplete_from, 
    title 
} => <div key={name}> 
     <FieldName/> 
     <PopulateAtCheckboxes populate_at={data.populate_at} /> 
    </div>);