Forms & Actions in React

import { Form, useActionData, useNavigation } from 'react-router'

// Action function
export async function action({ request, params }) {
  const formData = await request.formData()
  const title = formData.get("title")

  try {
    const post = await createPost({ title })
    return redirect(\`/posts/\${post.id}\`)
  } catch (error) {
    return { error: error.message }
  }
}

// Form component
export default function NewPost() {
  const actionData = useActionData<typeof action>()
  const navigation = useNavigation()
  const isSubmitting = navigation.state === "submitting"

  return (
    <Form method="post">
      <input name="title" required />
      {actionData?.error && (
        <p className="error">{actionData.error}</p>
      )}
      <button disabled={isSubmitting}>
        {isSubmitting ? "Creating..." : "Create Post"}
      </button>
    </Form>
  )
}