import { useState } from "react";

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

  const handleSubmit = (event) => {
    event.preventDefault(); // prevent page reload
    alert("Form submitted: " + name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>Simple React Form</h2>

      <input
        type="text"
        placeholder="Enter your name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />

      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

Example:

import { useState } from "react"; 
function Signup(){
    const[name, setName] = useState("");
    const[email, setEmail] = useState("");
    const[phone, setPhone] = useState("");
    const[password, setPassword] = useState("");
    const handleSubmit = async (e) => {
       
        e.preventDefault();
        const userData = {
            name,
            email,
            phone,
            password
        };
        try {
            const apiUrl = process.env.REACT_APP_API_URL + "/api/signup";
            const response = await fetch(apiUrl, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(userData)
            });
            const result = await response.json();
            console.log(result);
            if(response.ok) {
                alert("User registered successfully");
                setName("");
                setEmail("");
                setPhone("");
                setPassword("");
            }
            else {
                alert(result.message || "Error occurred during signup");
            }
        }
        catch (error) {
            console.error("Error in Signup:", error);   
        }

    }
    return(
        <>
        <form onSubmit={handleSubmit}>
            <h2>User Signup</h2>
            <input type="text" 
            placeholder="Name" 
            value={name}
            onChange = {(e) => setName(e.target.value)}
            />
            <input type="email" 
            placeholder="Email" 
            value={email}
            onChange = {(e) => setEmail(e.target.value)}
            />
            <input type="text" 
            placeholder="Phone" 
            value={phone}
            onChange = {(e) => setPhone(e.target.value)}
            />
            <input type="password" 
            placeholder="Password" 
            value={password}
            onChange = {(e) => setPassword(e.target.value)}
            />
            <button>Sign Up</button>
            </form>
        </>
    );
}

export default Signup;