React Basic Form Create | How to use useState effect in React

Hello friends today i am talking about React Basic From Generate.

import React, { useState } from "react";


const BasicForm = () => {

    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    const [allEntry, setAllEntry] = useState([]);

    const submitForm = (e) => {
        e.preventDefault();

        const newEntry = { email: email, password: password };

        setAllEntry([...allEntry, newEntry]);
        console.log(allEntry);
    }
    return (
        <>
            <div className="formDesign">
                <form action="" onSubmit={submitForm} className="">
                    <h1>Login Form</h1>
                    <div>
                        <label htmlFor="email">Email</label>
                        <input type="text" name="email" id="email" autoComplete="off"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                        />
                    </div>

                    <div>
                        <label htmlFor="password">Password</label>
                        <input type="password" name="password" id="password" autoComplete="off"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                        />
                    </div>
                    

                    <button type="submit">Login</button>
                </form>

                {
                    allEntry.map
                    
                    ((curElem) => {
                        return (
                            <div className="">
                                <p>{curElem.email}</p>
                                <p>{curElem.password}</p>
                            </div>
                        )
                    })
                }
            </div>
        </>
    )
}
export default BasicForm

Leave a Comment