How can you set an enum value from a form field string?

Question

I'm working with a field that should have a value that matches a value from an enum. However, TypeScript complains when I try to set the field value to state due to the incompatibility between the field value (a string) and the enum.

Here's an example of what I'm trying to do:

import * as React from "react";

enum ValidValues {
  foo = "foo",
  bar = "bar"
}

export default function App() {
  const [fieldValue, setFieldValue] = React.useState(ValidValues.foo);

  return (
    <input
      value={fieldValue}
      onChange={(e) => setFieldValue(e.currentTarget.value)}
    />
  );
}

I understand why I get the Argument of type 'string' is not assignable to parameter of type 'SetStateAction<ValidValues>' error, but I'm unsure how to make these compatible, if it is possible.

Does this answer your question? [How do I convert a string to enum in TypeScript?](https://stackoverflow.com/questions/17380845/how-do-i-convert-a-string-to-enum-in-typescript) — Andreas, Dec 07 '20 at 14:39
`e.currentTarget.value` is a `string` and `setFieldValue` expects an `enum` — captain-yossarian from Ukraine, Dec 07 '20 at 14:40

Michael Horvilleur · Answer 1 · 2022-02-24T18:47:44.050

1

You should use a drop down menu or a checkbox when using enums. Then, change the value to match the enum.

<select onChange={e => 
setFieldValue(ValidValues[e.target.value as keyof 
typeof ValidValues])}>

<option value={ValidValues.foo}>{ValidValues.foo} 
<option/>

<option value={ValidValues.bar}>{ValidValues.bar} 
<option/>

</select>

edited Feb 24 '22 at 18:47

answered Feb 24 '22 at 18:12

Michael Horvilleur

121
1
10

score 0 · Answer 2 · answered Dec 07 '20 at 14:41

0

I think you should be fine if you explicitly set the type of useState

const [fieldValue, setFieldValue] = React.useState<string>(ValidValues.foo);

answered Dec 07 '20 at 14:41

Jonathan Irwin

5,009
2
29
48

How can you set an enum value from a form field string?

2 Answers2