React JSX: Itérer dans un hachage et renvoyer des éléments JSX pour chaque clé

Question

J'essaie de parcourir toutes les clés d'un hachage, mais aucune sortie n'est renvoyée par la boucle. console.log() renvoie comme prévu. Avez-vous une idée de la raison pour laquelle le JSX n’est pas renvoyé et sorti correctement?

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() ne renvoie rien - utilisez .map() à la place:

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

Answer 2

un raccourci serait:

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>);