React Js - Form Submit, Input

 App.js

import React from "react";

import './App.css';

import ReactDom from "react-dom";

import Forms from './froms';

function App() {

 return(

   <>

   <Forms/>

   </>

 );

}

export default App;

forms.js

import React, { useState } from 'react';

const Forms = () => {

    const [names, setnames] = useState("");

    const [fullnames, setfullname] = useState("");

    const submitting = (e) =>{

        e.preventDefault();       //revent default events

    }

    const inputEvent = (e) => {

        console.log(e.target.value);

        setnames(e.target.value);

    }

    const clicked = () => {

        setfullname(names);

    }

    return (

        <>

            <div className="col-6 pt-5 m-auto">

                <form onSubmit={submitting}>

                    <h1 className="mb-3 text-center">Hello {fullnames}</h1>

                    <input className="form-control mb-3" type="text" placeholder="Enter Your Name" onChange={inputEvent} value={names} />

                    <button type="submit" className="btn btn-primary" onClick={clicked}>Click Me</button>

                </form>

            </div>

        </>

    )

}

//onchange is a input event listener in React. 

export default Forms;

//react has two types of components - 1. cotrolled components 2. un-controlled components