É novo no React e tenta executar um loop nos atributos do objeto, mas o React reclama que os objetos não são válidos. Reagir filhos. Alguém pode me dar alguns conselhos sobre como resolver esse problema? Adicionei createFragment, mas não tenho certeza de onde isso deve ir ou que abordagem devo adotar?

JS

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

Função Render

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

Erro no console

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