REACT FORM

App.jsx

import React, { useState } from 'react'

import "./index.css";

const App = () => {

    // Array Hook 

    const [name, setName] = useState("");

    const [showName, setShowName] = useState();    

    const [lastName, setLastName] = useState("");

    const [showLastName, setShowLastName] = useState();

    

    const Submit = (event) => {

        event.preventDefault();

        setShowName(name);

        setShowLastName(lastName);

    }

    

    return(

        <>

        <h1 className='top_head'> REACT FORM</h1>

        <div>

            <form onSubmit={Submit}>

            <h1>Hello, {showName} {showLastName} !</h1>

            <input type='text' placeholder='your name' 

    onChange={InputDataOne} value={name}/>

            <br/>

            <input type='text' placeholder='your last name' 

    onChange={InputDataTwo} value={lastName}/>

            <br/>

            <button type='submit' style={{backgroundColor:

    '#34495e', fontSize:'22px'}}> Click 😃</button>

            </form>            

        </div>

        </>);

};

export default App;