Slightly Complex Form

slightly-complex-form.jsx

import { useState } from "react";

export default function SlightlyComplexForm() {
  const [urlVisible, setUrlVisible] = useState(false);

  const handleSubmit = async (event) => {
    // Same as before
  };

  const handleEmailChange = (event) => {
    setUrlVisible(Boolean(event.target.value.length));
  };

  const handlePasswordBlur = (event) => {
    event.target.reportValidity()
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="email" required onChange={handleEmailChange} />
      <input name="password" type="password" minlength="6" onBlur={handlePasswordBlur} required />
      {urlVisible && <input name="url" type="url" required />}
      <button>Submit</button>
    </form>
  );
}

I see! Thanks a lot for explaining that. I've never used this api, so I'm definitely going to play around with this now, cheers! :)