Reusable Forms

function AddressFormPart(
  // <-- what should I pass here?
) {
  return (
    <>
      <form.Field
        name="address.street"
        children={(field) => (
          <input
            id={field.name}
            name={field.name}
            value={field.state.value}
            onBlur={field.handleBlur}
            onChange={(e) => field.handleChange(e.target.value)}
          />
        )}
      />

      <form.Field
        name="address.city"
        children={(field) => (
          <input
            id={field.name}
            name={field.name}
            value={field.state.value}
            onBlur={field.handleBlur}
            onChange={(e) => field.handleChange(e.target.value)}
          />
        )}
      />

      <form.Field
        name="address.postalCode"
        children={(field) => (
          <input
            id={field.name}
            name={field.name}
            value={field.state.value}
            onBlur={field.handleBlur}
            onChange={(e) => field.handleChange(e.target.value)}
          />
        )}
      />
    </>
  )
}

function SignUp() {
  const form = useForm({
    defaultValues: {
      username: "",
      // more data to be collected…
      address: {
        street: "",
        city: "",
        postalCode: "",
      } 
    }
  })

  function handleSubmit() {}

  return (
    <form onSubmit={handleSubmit}>
      <form.Field
        name="username"
        children={(field) => (
          <input
            id={field.name}
            name={field.name}
            value={field.state.value}
            onBlur={field.handleBlur}
            onChange={(e) => field.handleChange(e.target.value)}
          />
        )}
      />
    </form>
  )
}