使用地图功能填充的reactJS动态下拉列表

我试图用一个从1到100的数字表示一个简单的下拉列表。我创建一个对象，将数组作为其唯一元素。我用一个值填充每个数组元素，然后尝试映射该对象以生成下拉项。这是我正在执行的代码：

renderPercent = () => {
    let obj = {
        array: []
    };
    for (var l=0;l<100;l++){
        obj.array[l] = l+1;
    }
    console.log("obj: ", obj);
    let optionItems = obj.array.map((item) =>
        <option key={item}>{item}</option>
    );
    return (
        <div>                
            <div className="row">
                <div className="col-9 text-left">
                    <label>Select the percent to transfer</label>
                </div>
                <div className="col-2 text-left">
                    <select>
                        {optionItems}
                    </select>
                </div>
                <div className="col-1 text-left">
                    <label>&nbsp;</label>
                </div>
            </div>
        </div>
    )
}

我按照建议修改了optionItems映射功能。这是渲染此屏幕时现在生成的：

如您所见，地图功能现在正在填充我的下拉菜单。但是，下拉列表将低于设备末尾。当使用开发人员工具在Chrome中查看时，这仅仅是错误吗？我注意到的另一件事是，下拉菜单中的数字是比重置页面更大的字体。在单击下拉箭头之前，下拉菜单中会显示1，这是正确的大小，但是一旦我扩展下拉列表，数字就会大很多。为什么会这样呢？

再次感谢stackoverflow社区！