import { Field } from "formik";
import * as _ from "lodash";
import React = require("react");

export const Dropdown = (props: {
  fieldName: string;
  options: {};
  children: any;
}) => (
  <div className="c-dropdown">
    <span>{props.children}</span>
    <SelectOptions {...props} />
  </div>
);

const SelectOptions = (props: { fieldName: string; options: {} }) => (
  <Field component="select" name={props.fieldName}>
    {_.values<string>(props.options).map(option => (
      <option value={option} key={option}>
        {option}
      </option>
    ))}
  </Field>
);

import { Field } from "formik";
import React = require("react");

export const Dropdown = (props: {
  fieldName: string;
  options: {};
  children: any;
}) => (
  <div className="c-dropdown">
    <span>{props.children}</span>
    <SelectOptions {...props} />
  </div>
);

const SelectOptions = (props: { fieldName: string; options: {} }) => (
  <Field component="select" name={props.fieldName}>
    {Object.keys(props.options).map(option => (
      <option value={option} key={option}>
        {props.options[option]}
      </option>
    ))}
  </Field>
);

--- 
+++ 
@@ -1,4 +1,5 @@
 import { Field } from "formik";
+import * as _ from "lodash";
 import React = require("react");
 
 export const Dropdown = (props: {
@@ -14,9 +15,9 @@
 
 const SelectOptions = (props: { fieldName: string; options: {} }) => (
   <Field component="select" name={props.fieldName}>
-    {Object.keys(props.options).map(option => (
+    {_.values<string>(props.options).map(option => (
       <option value={option} key={option}>
-        {props.options[option]}
+        {option}
       </option>
     ))}
   </Field>
Use enum values instead of keys
