const { useEffect } = React;
const { useForm } = ReactHookForm;

const App = () => {
  const {
    register,
    formState: { isLoading },
    handleSubmit
  } = useForm({
    defaultValues: async () => {
      const response = await fetch("https://api.ipify.org/?format=json");
      const data = await response.json();
      return {
        ip: data.ip
      };
    }
  });

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" {...register("ip")} disabled={isLoading} /> <br />
      <br />
      {isLoading && <p>正在獲取 IP 地址...</p>}
      <button type="submit" disabled={isLoading}>
        提交
      </button>
    </form>
  );
};

ReactDOM.render(<App />, document.querySelector("#app"));