ReactJS Component Skeleton for Register/Create Account

Hello,

Welcome, here is how you can create a get to started ReactJS Register/Create Account component from scratch with very basic fields for your website or application.

import React from "react";

function CreateAccount() {

    const [formValues, setFormValues] = useState({
        role: '',
        name: '',
        mobile: '',
        email: '',
        password: '',
        confirmPassword: ''
    });

    const handleInputChange = e => {
        const { name, value } = e.target;
        setFormValues({ ...formValues, [name]: value });
    };

    const handleSubmit = e => {
        e.preventDefault();
        // You can perform your form submission logic here
        console.log(formValues);
    };

    return (<>
        <div className="card">
            <div className="card-body">
                <form method="POST" action="https://doableyo.com/atamsamagam/admin/register">
                    {/* <input type="hidden" name="_token" defaultValue="zdDR1NfxywhlhmpIqNTZ7uNUvl1luoUe7X0N6GOh" /> 
                        for CSRF!
                    */}
                    <div className="form-group row">
                        <label htmlFor="role" className="col-md-4 col-form-label text-md-right">Role</label>
                        <div className="col-md-6">
                            <select id="role" name="role" className="form-control  text-capitalize" required autoComplete="role" autofocus>
                                {/* need a fix of admin */}
                                <option value="user">user</option>
                                <option value="admin">admin</option>
                            </select>
                        </div>
                    </div>
                    <div className="form-group row">
                        <label htmlFor="name" className="col-md-4 col-form-label text-md-right">Name</label>
                        <div className="col-md-6">
                            <input id="name" type="text" className="form-control " name="name" defaultValue required autoComplete="name" autofocus />
                        </div>
                    </div>
                    <div className="form-group row">
                        <label htmlFor="mobile" className="col-md-4 col-form-label text-md-right">Mobile</label>
                        <div className="col-md-6">
                            <input id="mobile" type="number" required minLength={10} maxLength={10} className="form-control " name="mobile" defaultValue autoComplete="mobile" />
                            <small>Enter without country code or + character</small>
                        </div>
                    </div>
                    <div className="form-group row">
                        <label htmlFor="email" className="col-md-4 col-form-label text-md-right">E-Mail Address</label>
                        <div className="col-md-6">
                            <input id="email" type="email" className="form-control " name="email" defaultValue required autoComplete="email" />
                        </div>
                    </div>
                    <div className="form-group row">
                        <label htmlFor="password" className="col-md-4 col-form-label text-md-right">Password</label>
                        <div className="col-md-6">
                            <input id="password" type="password" className="form-control " name="password" required autoComplete="new-password" />
                        </div>
                    </div>
                    <div className="form-group row">
                        <label htmlFor="password-confirm" className="col-md-4 col-form-label text-md-right">Confirm Password</label>
                        <div className="col-md-6">
                            <input id="password-confirm" type="password" className="form-control" name="password_confirmation" required autoComplete="new-password" />
                        </div>
                    </div>
                    <div className="form-group row mb-0">
                        <div className="col-md-6 offset-md-4">
                            <button type="submit" className="btn btn-primary">
                                Create
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </>)
}

export default CreateAccount;

Source: Self Learned & AI ChatGPT Channel

Happy learning!