Create Login Form with React in Hindi | Handling Basic Form with React Hook

Basic form in React js. User can enter mail id and password and Onclick on submit button I am getting values from the input fields and showing back to the user.

Also you can use the React Developer Tools extension to see the data in hooks.

import React, {useState} from 'react';

const Basicform = () => {

    // creating state value's

    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]);

     }

    return (

        <>

            <form action="post" onSubmit={submitForm}>

                <div>

                    <label htmlFor="email">Email</label>

                    <input type="email" name="email" id="email" 

                        value={email} 

                        onChange={(e) => setEmail(e.target.value)} 

                        autocomplete="off"/>

                </div>

                <div>

                    <label htmlFor="password">Password</label>

                    <input type="password" name="password" 

                        id="password" value={password} 

                        onChange={(e) => 

                        setPassword(e.target.value)}/>

                </div>

                <div>

                    <button type="submit" name="loginBtn">Login</button>

                </div>

            </form>

            

            <div>

                {allEntry.map( (currentElemet) => {

                    return (

                        <>

                            <div>

                                <p>{currentElemet.email}</p>

                                <p>{currentElemet.password}</p>

                            </div>

                        </>

                    )

                })}

            </div>

        </>

    )

}

export default Basicform