Forms ও Input

import { useState } from "react";

function NameForm() {
  const [name, setName] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Submitted:", name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={name} // value → state
        onChange={(e) => setName(e.target.value)} // state আপডেট
        placeholder="নাম"
      />
      <button type="submit">Save</button>
    </form>
  );
}

function SearchForm() {
  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    console.log(formData.get("query")); // input-এর name থেকে
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="query" defaultValue="" />
      <button>Search</button>
    </form>
  );
}

import { useActionState } from "react";

async function submitMessage(prevState, formData) {
  await saveMessage(formData.get("message"));
  return { ok: true, message: "Saved!" };
}

function MessageForm() {
  const [state, action, pending] = useActionState(submitMessage, null);

  return (
    <form action={action}>
      <textarea name="message" required />
      <button disabled={pending}>
        {pending ? "সাবমিট হচ্ছে…" : "Submit"}
      </button>
      {state?.message && <p>{state.message}</p>}
    </form>
  );
}

const [city, setCity] = useState("dhaka");
const [agree, setAgree] = useState(false);

<select value={city} onChange={(e) => setCity(e.target.value)}>
  <option value="dhaka">ঢাকা</option>
  <option value="ctg">চট্টগ্রাম</option>
</select>

<label>
  <input
    type="checkbox"
    checked={agree}
    onChange={(e) => setAgree(e.target.checked)}
  />
  আমি সম্মত
</label>