How can I retain the selected <select> field value in a React form using useActionState?

When you use the defaultValue attribute on a select field, it only sets the initial value on the first mount. Subsequent renders (such as after a form submission) won’t update the defaultValue. Text inputs may seem to "retain" their values because the browser maintains their state, but for select elements or when using custom state management (like with useActionState), you need to explicitly control the value.

To fix the issue, convert your select field into a controlled component by using the value prop along with an onChange handler. This way, when the form is submitted and your state (from useActionState) updates, the select field will reflect the current value.

Below is an example of how you could modify your component:

JAVASCRIPTCopied
import { useActionState } from "react";
import { useState, useEffect } from "react";

function Form() {
  // Initialize our action state
  const [formData, formAction, isPending] = useActionState(
    async (previous, current) => current,
    new FormData()
  );

  // Use local state to control the select field.
  // Initialize from formData on mount.
  const [selected, setSelected] = useState(formData.get("example") || "1");

  // Sync local state if formData changes (for example, after form submission)
  useEffect(() => {
    const newValue = formData.get("example");
    if (newValue && newValue !== selected) {
      setSelected(newValue);
    }
  }, [formData, selected]);

  const handleChange = (event) => {
    setSelected(event.target.value);
  };

  return (
    <form action={formAction}>
      <select name="example" value={selected} onChange={handleChange}>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

Explanation

• Controlled Component: The select element now uses the value prop set to your local state variable selected.
• onChange Handler: When the user selects a different option, handleChange updates the local state.
• Syncing With useActionState: After submission, if formData contains an updated value, the useEffect hook will update the local state. This ensures the select field always reflects the latest value from your action state.

Using this approach keeps the select field’s value in sync with your data state even after form submissions.