Page - Routing using state machines

IncomePage.jsx

import { getNextPathname, goTo } from "router";
import { updateApplication } from "api";

function IncomePage() {
  
  // This is within the page for example purposes, but
  // could be abstracted for a multi-page form.
  const handleFormSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);

    updateApplication(formData).then(() => {
      const context = {
        has_job_income: formData.get("has_job_income") === "Yes",
      };
      const nextPathname = getNextPathname("CONTINUE", context);
      
      goTo(nextPathname);
    });
  };

  return (
    <form onSubmit={handleFormSubmit}>
      <label>
        <input name="has_job_income" type="checkbox" value="Yes" />
        I have income from a job in 2021
      </label>
    </form>
  )
}