zrozumiecReact.pl

import { useState } from "react";

export default function App() {
    const [name, setName] = useState("");
    const [role, setRole] = useState("Użytkownik");

    const [person, setPerson] = useState(null);

    function handleSubmit(e) {
        e.preventDefault();
        setPerson({name, role});
        setName("");
    } 

    return (
        <>  
            <h1>Dane osobowe:</h1>
            {person && <>
                <h2>{person.name}</h2>
                <h3>{person.role}</h3>
            </>}
            <form onSubmit={handleSubmit}>
                <div>
                    <input 
                        onChange={(e) => setName(e.target.value)} 
                        value={name} 
                        placeholder="Imię" />
                </div>
                <div>
                    <input 
                        id="user"
                        name="role"
                        value="Użytkownik"
                        type="radio"
                    />
                    <label htmlFor="user">Użytkownik</label>
                </div>
                <div>
                    <input 
                        id="moderator"
                        name="role"
                        value="Moderator"
                        type="radio"
                    />
                    <label htmlFor="moderator">Moderator</label>
                </div>
                <div>
                    <input 
                        id="admin"
                        name="role"
                        value="Administrator"
                        type="radio"
                    />
                    <label htmlFor="admin">Administrator</label>
                </div>                
                <button disabled={name.length === 0}>Zapisz</button>
            </form>
        </>
    );
}