[解決済み] Reactでオブジェクトをループさせるには？

質問

React の初心者で、Object 属性をループさせようとしていますが、React は Object が有効な React の子でないことを訴えます。私はcreateFragmentを追加しましたが、これがどこに行く必要があるか、または私が取るべきアプローチは何か、完全にわからないのですか？

JS

var tifs = {1: 'Joe', 2: 'Jane'};
var tifOptions = Object.keys(tifs).forEach(function(key) {
    return <option value={key}>{tifs[key]}</option>
});

レンダリング機能

render() {
        const model = this.props.model;

        let tifOptions = {};

        if(model.get('tifs')) {
            tifOptions = Object.keys(this.props.model.get('tifs')).forEach(function(key) {
                return <option value={key}>{this.props.model.get('tifs')[key]}</option>
            });
        }

        return (
            <div class={cellClasses}>

                    <div class="grid__col-5 text--center grid__col--bleed">
                        <h5 class="flush text--uppercase">TIF</h5>
                        <select id="tif" name="tif" onChange={this.handleChange}>
                            {tifOptions}
                        </select>
                    </div>

            </div>
        );
    }

コンソールでのエラー

If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object)

どのように解決するのですか？

問題は、あなたが使っている forEach() を使っていることです。 undefined . あなたが探しているのは、おそらく map() メソッドを探しているのでしょう。

var tifOptions = Object.keys(tifs).map(function(key) {
    return <option value={key}>{tifs[key]}</option>
});

もし、まだ forEach() を使いたいのであれば、このようにしなければなりません。

var tifOptions = [];

Object.keys(tifs).forEach(function(key) {
    tifOptions.push(<option value={key}>{tifs[key]}</option>);
});

更新しました。

ES6 を書いているのであれば、同じことを 矢印機能 :

const tifOptions = Object.keys(tifs).map(key => 
    <option value={key}>{tifs[key]}</option>
)

上記のすべてのオプションを表示するフィドルを以下に示します。 https://jsfiddle.net/fs7sagep/