Skip to main content

react from handerler

  form handler

1 step 

const [user ,setUser]= useState({
  email:"",
  password:''
})
// 2 step
 <input onChange={handleChange} value={user.email} id="email-address"
name="email" type="email" autocomplete="email" required >

//3 step
          <form onSubmit={dataHandler} class="mt-8 space-y-6"
action="#" method="POST">

4 step
function handleChange(evt) {
  const value = evt.target.value;
  setUser({
    ...user,
    [evt.target.name]: value
  });

5 step
const dataHandler = (e)=>{
  e.preventDefault()
console.log(user)
}




Comments

Popular posts from this blog

Responsive Nav Bar

 Responsive Nav Bar  review of navbar Font Awsome cdn link   < script   src = "https://kit.fontawesome.com/6d985e968b.js"   crossorigin = "anonymous" ></ script > CSS < style >              * {                  padding :  0 ;                  margin :  0 ;                  list-style : none;                  box-sizing : border-box;             }              .navbar {            ...

Image Upload by using Node Js and Multer

 Image Upload by using Node Js and Multer Require package const   const  multer = require( 'multer' ) const  path = require( 'path' )multer = require( 'multer' ) const  path = require( 'path' ) For Save in Folder  Do static path  app.use(express.static(__dirname +  './public' )); app.use( '/uploads' , express.static( 'uploads' )); Multer part,Multer middleware  const  storage = multer.diskStorage({      // Destination to store image          destination: (req,file,cb) => { cb ( null  ,  "./uploads" )     } ,       filename: (req, file, cb)  =>  {          // console.log(file)           cb( null ,fi...

Node JS Express

 Node Js Express npm & Installation npm init npm i express Require // organization of a project const express = require ( "express" ); const compression = require ( "compression" ); const cookieParser = require ( "cookie-parser" ); const csrf = requrie ( "csurf" ); const morgan = require ( "morgan" ); const multer = require ( "multer" ); Initilasation Express const  app = express(); EJS COde app.use( "/static" , path.join(__dirname,  "static" )); app.set( "view engine" ,  "ejs" ); app.set( "views" , path.join(__dirname,  "/views" )); BOdy Post  app.use(express .urlencoded({ extended : true })); Routes  //routers for nav bar ......... app.get( "/" ,(req,res) => {     res.send( "you are at now Home" ) }) app.get( "/about" ,(req,res) => {     res.send( "About Us" ) }) app.get( "/Contect" ...