Refactor NewContract component to assign value to select

web/pages/create.tsx

@@ -20,7 +20,7 @@ import { MAX_DESCRIPTION_LENGTH, outcomeType } from 'common/contract'
 import { formatMoney } from 'common/util/format'
 import { useHasCreatedContractToday } from 'web/hooks/use-has-created-contract-today'
 import { removeUndefinedProps } from '../../common/util/object'
-import { CATEGORIES, CATEGORY_LIST, TO_CATEGORY } from 'common/categories'
+import { CATEGORIES } from 'common/categories'
 
 export default function Create() {
   const [question, setQuestion] = useState('')
@@ -214,14 +214,12 @@ export function NewContract(props: { question: string; tag?: string }) {
 
         <select
           className="select select-bordered w-full max-w-xs"
-          onChange={(e) =>
+          value={category}
-            setCategory(TO_CATEGORY[e.currentTarget.value] ?? '')
+          onChange={(e) => setCategory(e.currentTarget.value ?? '')}
-          }
         >
-          <option selected={category === ''}></option>
+          <option value={''}></option>
-
           {Object.entries(CATEGORIES).map(([id, name]) => (
-            <option key={id} selected={category === id} value={name}>
+            <option key={id} value={id}>
               {name}
             </option>
           ))}