import React, { useState } from "https://esm.sh/react@18";
import ReactDOM from "https://esm.sh/react-dom@18";

const Form = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const disabled = !name || !email;

  const handleSubmit = e => {
    e.preventDefault();
    if (disabled) {
      return
    }
    alert(name, email);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name</label>
      <input type="text" id="name" value={name} onChange={e => setName(e.target.value)} />
      <label htmlFor="email">Email</label>
      <input type="email" id="email" value={email} onChange={e => setEmail(e.target.value)} />
      <button aria-disabled={disabled}>Submit</button>
    </form>
  );
};


ReactDOM.render(<Form />,
document.getElementById("root"))