SIMPLE PRESIZED FORM IN REACT JS

 App.jsx

import React, { useState } from 'react'

import Card from './Cards';

import Sdata from './Sdata';

import "./index.css";

const App = () => {

    // Array Hook 

    const [showName, setShowName] = useState({

        fname : "",

        lname : ""

    });  

    

    const InputData = (event) => {

        console.log(event.target.value);

        console.log(event.target.name);

        const {name, value} = event.target;

        setShowName((x) => {

            console.log(x);

            return {

                ...x, // Spread Operator

                [name] : value

            };

        })

    }

    const Submit = (event) => {

        event.preventDefault();

        alert ("Form Submitted");

    }

    

    return(

        <>

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

        <div>

            <form onSubmit={Submit}>

            <h1>Hello, {showName.fname} {showName.lname} !</h1>

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

                onChange={InputData} 

                name='fname' value={showName.fname}/>

            <br/>

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

                onChange={InputData} 

                name='lname' value={showName.lname}/>

            <br/>

            <button type='submit' style={{backgroundColor:'#34495e', 

                fontSize:'22px'}}>Click<span>😃</span></button>

            </form>            

        </div>

        </>);

    };

    export default App;