Forms & Controlled Inputs

1
2
3
4
5
6
7
8
9
10
11
12
13

function Form() {
    const [name, setName] = useState("");
    const handleSubmit = (e) => {
        e.preventDefault();
        alert(`Submitted: ${name}`);
    };
    return (
        <form onSubmit={handleSubmit}>
            <input value={name} onChange={e => setName(e.target.value)} />
            <button type="submit">Submit</button>
        </form>
    );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import { useState } from "react";

function Form() {
    const [formData, setFormData] = useState({
        name: "", email: ""
    });

    const handleChange = (e) => {
        setFormData({ ...formData, [e.target.name]: e.target.value });
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(formData);
    };

    return (
        <form onSubmit={handleSubmit}>
            <input name="name" value={formData.name}
                   onChange={handleChange} placeholder="Name" />
            <input name="email" value={formData.email}
                   onChange={handleChange} placeholder="Email" />
            <button type="submit">Submit</button>
        </form>
    );
}