Handling Complex Form

 Why Value is required?

It capture the value typed in the form and captures it for further use


Controlled Components vs Uncontrolled Components is very important - need to learn again


In its tutorial we have learnt how to reduce number of useState and use only one state.


This is somewhat tricky but regular practice will make it really easy.Thank you


import React, { useState } from 'react';

const App = () => {

const [fullName, setfullName] = useState({
fName: "",
lName: "",
});


const inputEvent = (event) => {
const Value= event.target.value;
const name = event.target.name;

setfullName((prevValue)=>{
if(name === 'fName')
{
return{
fName:Value,
lName:prevValue.lName,
}
}

else if (name ==='lName')
{ return{
fName:prevValue.fName,
lName:Value,
}

}
})


};




const onSubmit = (event) => {
event.preventDefault();

}



return (<>

<div>

<form onSubmit={onSubmit}>
<h1>Hello {fullName.fName} {fullName.lName}</h1>

<input type="text" placeholder="Enter your First Name" name="fName" value={fullName.fName}
onChange={inputEvent}
/><br />
<input type="text" placeholder="Enter your Last Name" name="lName" value={fullName.lName} onChange={inputEvent} /> <br />
<button type="submit">Click Me</button>



</form>

</div>

</>);
}

export default App;

Comments

Post a Comment

Popular posts from this blog

Form Part 2

App.jsx import React , { useState } from 'react' ; const App = () => { const [ Name , setName ] = useState (); const [ Pass , setPass ] = useState (); const [ seename , seename1 ] = useState (); const [ seepass , seepass1 ] = useState (); const inputEvent = ( event ) => { setName ( event . target . value ); }; const inputEvent1 = ( event ) => { setPass ( event . target . value ); }; const onSubmit = ( event ) => { event . preventDefault (); seename1 ( Name ); seepass1 ( Pass ); } return ( < > < div > < form onSubmit = { onSubmit } > < h1 > Hello { seename } { seepass } </ h1 > < input type = "text" placeholder = "Enter your Name" value = { Name } ...
Read more

Event mini project by Thapa#33

 Index.jsx import React from 'react' import ReactDOM from 'react-dom' ; import "./index.css" ; import App from "./App" ; ReactDOM . render ( < App /> , document . getElementById ( "root" )); index.css * { margin : 0 ; padding : 0 ; } div { width : 100% ; height : 100vh ; background : rgb ( 221 , 39 , 221 ); display : flex ; flex-direction : column ; justify-content : center ; align-items : center ; } button { padding : 12px 20px ; background : #9b59b6 ; color : white ; border : 2px solid #ecf0f1 ; outline : none ; border-radius : 5px ; text-transform : uppercase ; cursor : pointer ; } app.jsx import React , { useState } from 'react' ; const App =() => { const Purple = "yellow" ; const Old = "Click Me" const [ bg , setBg ] = useState ( Purple ); const [ name , newName ] = useState ( Old ); const bgChange =() => { let ...
Read more

De-mystifying 'this' keyword of Javascript

 Hello today I will be talking about 'this' keyword of javascript.It is one of the most confusing term of javascript. Since it is quite a confusion thing I will be compiling stuffs based on the materials I have learnt from the internet so as to help myself in the future. 'this' keyword can be considered quite the literal this word is English alphabet atleast for the initial understanding. Let's consider a main table of a house. It will be termed in js langauge as this.table = "main table" If we console log window.table or this.table than we will be considering the main house's table console.log(window.table) //main table Now let consider the dinning table of the house. It will be  this.dinning={ table:"dinning table"} If we want to call it will be  this.dinning.table // dinning table   Now let consider a private room and in this case it will be a function and if we want to use there we can use as mentioned below let johnsroom = { table:'j...
Read more