Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

import { useState } from 'react';

function RegistrationForm() {
    const [fields, setFields] = useState({
        username: '',
        email:    '',
        password: '',
    });
    const [submitted, setSubmitted] = useState(false);

// Single handler for all inputs
    function handleChange(e) {
        const { name, value } = e.target;
        setFields(prev => ({ ...prev, [name]: value }));
    }

// Derived validation (computed during render)
    const errors = {
        username: fields.username.length < 3 ? 'Min 3 characters' : '',
        email:    !fields.email.includes('@') ? 'Invalid email'   : '',
        password: fields.password.length < 8  ? 'Min 8 characters': '',
    };
    const isValid = Object.values(errors).every(e => e === '');

function handleSubmit(e) {
        e.preventDefault();
        if (!isValid) return;
        setSubmitted(true);
        console.log('Submitting', fields);
    }

if (submitted) return <p>Registration successful!</p>;

return (
        <form onSubmit={handleSubmit}>
            {(['username', 'email', 'password']).map(field => (
                <div key={field}>
                    <input
                        name={field}
                        type={field === 'password' ? 'password' : 'text'}
                        value={fields[field]}
                        onChange={handleChange}
                        placeholder={field}
                    />
                    {errors[field] && <span>{errors[field]}</span>}
                </div>
            ))}
            <button type="submit" disabled={!isValid}>Register</button>
        </form>
    );
}