React JS — Login and Register

First we need to setup a fresh React JS project. You can follow my previous blog

[embed]React js project setup open your vs code editor and open your terminal and run this commandmedium.com

Now we need to create some page and start routing in our project with the help of react-router-dom or react-router. you can follow my previous blog regarding this

[embed]How to create pages in react js (react routing with react router dom) open your vs code editor and open your terminal and run this commandmedium.com

Now create 2 files

• Login.jsx
• Register.jsx

Write this code in these files

in Login.jsx

import { useState } from "react";

const Login = () => {

    const [user, setUser] = useState({
        email: "",
        password: ""
    });

    const handleInput = (e) => {
        const name = e.target.name;
        const value = e.target.value;

        setUser(prev => ({
            ...prev,
            [name]: value
        }));
    }

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

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <div>
                    <label htmlFor="email">Email</label>
                    <input
                        type="email"
                        name="email"
                        id="email"
                        value={user.email}
                        onChange={handleInput}
                        required
                        autoComplete="off"
                    />
                </div>
                <div>
                    <label htmlFor="password">Password</label>
                    <input
                        type="password"
                        name="password"
                        id="password"
                        value={user.password}
                        onChange={handleInput}
                        required
                        autoComplete="off"
                    />
                </div>
                <div>
                    <button type="submit">Login</button>
                </div>
                <div>
                </div>
            </form>
        </div>
    )
}

export default Login

in Register.jsx

import { useState } from "react";

const Register = () => {

    const [user, setUser] = useState({
        name: "",
        email: "",
        password: ""
    });

    const handleInput = (e) => {
        const name = e.target.name;
        const value = e.target.value;

        setUser({
            ...user,
            [name]: value
        });
    }

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

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <div>
                    <label htmlFor="name">name</label>
                    <input
                        type="text"
                        name="name"
                        id="name"
                        value={user.name}
                        onChange={handleInput}
                        required
                        autoComplete="off"
                    />
                </div>
                <div>
                    <label htmlFor="email">Email</label>
                    <input
                        type="email"
                        name="email"
                        id="email"
                        value={user.email}
                        onChange={handleInput}
                        required
                        autoComplete="off"
                    />
                </div>
                <div>
                    <label htmlFor="password">Password</label>
                    <input
                        type="password"
                        name="password"
                        id="password"
                        value={user.password}
                        onChange={handleInput}
                        required
                        autoComplete="off"
                    />
                </div>
                <div>
                    <button type="submit">Register</button>
                </div>
                <div>
                </div>
            </form>
        </div>
    )
}

export default Register