#36 : Handling Complex Multiple Input Form States in React JS in Hindi

Welcome, how to handled complex states in react js form in Hindi.
************ Must Watch Videos For Web Development ************
➡️ Hooks in React JS in Hindi | useState in Hook in React JS: • #30: Hooks in React J...
➡️ Array Destructuring in ES6 in JavaScript in Hindi 2020: • ES6 Tutorial #5: Array...
➡️ Object Destructuring in ES6 in JavaScript in Hindi: • ES6 Tutorial #7: Objec...
➡️ React DevTools & Source Code Link: www.thapatechnical.com/2020/0...
➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: • React JS Tutorial in H...
➡️ ReactJS JavaScript Array Map Method in Hindi with Example: • ReactJS JavaScript Arr...
➡️ Fat Arrow Function in JavaScript in Hindi 2020: • ES6 Tutorial #8: Fat A...
➡️ #23: Array in React JS in Hindi | React JS Project Netflix App #2 in Hindi in 2020
➡️ Array in JavaScript in Hindi: • JavaScript Tutorial in...
➡️ #22: React JS Project Netflix App Part #1 in Hindi in 2020: • #22: Props in React Js...

➡️ Install VS Code for ReactJS LINK: www.thapatechnical.com/2020/0...
➡️ Check Complete Reactjs in One video here 👇 • ReactJS For Beginners ...
➡️ HTML in One Video: • Learn HTML in One Vide...
➡️ CSS in One video: • Learn Complete CSS In ...
➡️ CSS FlexBox in 30 Minutes: • CSS FlexBox in 30 Minu...
➡️ JavaScript in One video: • JavaScript in One Vide...
➡️ ECMAScript 6 in One Video: • ES5 & ES6 | ECMAScript...
➡️ HTML5 in one video: • HTML5 Tutorial in One ...
➡️ CSS3 in one video: • Learn Complete CSS3 In...
➡️ Bootstrap4 in One video: • Bootstrap 4 in One Vid...
➡️ Jquery in One video: • jQuery in One Video in...
➡️ JSON in one video: • JSON in One Video in H...
➡️ ReactJS in one video: • ReactJS For Beginners ...
➡️ PHP in One Video: • PHP TUTORIAL IN ONE VI...
➡️ NodeJS in one video: / ipnwakoibt
➡️ MySQL in one video: • Complete SQL & MySQL i...
********** CLICK HERE TO WATCH ************
➡️ Fetch API in JavaScript: • Fetch API in JavaScrip...
➡️ AJAX tutorial for beginners in Hindi: • AJAX tutorial for begi...
➡️ Template literals (Template strings) in ES6 in JavaScript in Hindi: • ES6 Tutorial #3: Templ...
➡️ Async Await in JavaScript in Hindi: • Async Await in JavaScr...
➡️ Promises in JavaScript in Hindi: • Master The Promises in...
➡️ Callback Hell in JavaScript: • Callback Hell in JavaS...
➡️ Advanced JavaScript in Hindi Playlist: • Advanced JavaScript Tu...
➡️ ECMAScript Tutorial in Hindi 2020: • Modern JavaScript ES6 ...
➡️ ES5 & ES6 | ECMAScript 6 in One Video in Hindi: • ES5 & ES6 | ECMAScript...
➡️ JavaScript Game Development Series in 2020: • JavaScript Game Develo...
➡️ Source Code Link: www.thapatechnical.com/2019/1...
➡️ Top 5 Programming Languages in 2020: • Top 5 Programming Lang...
➡️ Ludo Game JavaScript Link: • JavaScript Game in Hin...
➡️Plz show some love to My Siter KZbin Channel and Plz Subscribe Link: / @mayabeautyvlogs878
**************** MUST WATCH VIDEOS *****************
➡️ How to become a Full Stack Developer 2020: • How to become a Full S...
➡️ How To Become a Web Developer 2020: • How To Become a Web De...
➡️ How JavaScript Works: • How JavaScript Works i...
➡️ Follow me on Instagram: / vinodthapa55
Make Website Responsive Using Media Queries in One Video in Hindi | Web Design Tutorial in Hindi
➡️ Link: • Make Website Responsiv...
Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.
Don't Forget to Follow me on all Social Network,
Website Link: www.thapatechnical.com
Instagram Link: / vinodthapa55
Facebook Link: / vinodthapa55
Twitter Link: / vb55thapa
Facebook ThapaTechnical Page Link: vinodbahadur...

[@ThapaTechnical]

video ko ek do bar jarror dekhe :) ➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: kzbin.info/aero/PLwGdqUZWnOp3aROg4wypcRhZqJG3ajZWJ

[@shubhamkanojia7249]

React native me multiple input kse handle krege....

[@steelado3433]

for those who didn't understood don't try to complicate things, this is really easy, don't try to binge watch rather try things at same time when Vinod teaching us pause the video and think what he said at every 3 to 5 minutes. at first I didn't really understood the concept but in 3rd time something clicked in my mind and I was laughing at my own for just making it more complicated. he used simple JS.

[@sandeeprana331]

same here bro😃

[@divyanshchaudhary7063]

Bhai tune itna complicated kardeya ye topic

[@anshudhar966]

Tumhare videos dekhkar mujhe web developer ki job mil gayi, thank you bro!!

[@abhijoker7325]

Bhai meri help karde yar ........

[@mr.anonymous6640]

congrats bro , where ❓

[@ncmnk9484]

This seems more complicated than previous login page

[@anandatype7442]

ys brdr

[@profitjourneywithsk2136]

Sir you are awesome. You teach hard topics very easily. I appreciate all your hard work . sir your videos are always very helpful .Thank you.

[@sanketsuryawanshi]

Best KZbin channel ever

[@prasiddh283]

Most underrated channel of KZbin👏

[@asmereg]

Thank you, Bhai. You teach really great💜🔥

[@MrKapbat]

since you have taken same fname and lname at every function. This is very very confusing. This is the first video which confused me. And if we need to do all this simply to get value. Don't you think simple javascript infact jquery is much much better. I have a feeling that their must be another simplest way to get and store values of form.

[@myselfsohit]

There are various way ...He is trying to make comfortable with react

[@manishdiggi231]

yeah it also confused me.. :/

[@ertugruledittz1144]

@@manishdiggi231 same goes with me

[@yoyocr2034]

same, this is maybe the first time i got bored of this tutorial.. might have to rewatch it 2/3 times to understand

[@Deepak-gj4ni]

Mast I was looking for a shorter way without creating multiple states moj krdi bhai

[@md.jubairahmed4097]

Even that code is also bulky, you could simply use setName(prev=>{...prev, [e.target.name]: e.target.value})

[@basiceducation7327]

Loved the way you teach 👍

[@hardikpoudel3011]

i got the 1000 like and this video cleared all of my doubt

[@ashishkumarburnwal5750]

Using object destructuring will be useful in this case like- const [values, setValues] = useState({ fname: "", lname: "", email: "", }) const changeHandle = (event) => { setValues({ ...values, [event.target.name]: event.target.value }) }

[@md.jubairahmed4097]

yeah, exactly. This is the simplest one

[@bipinshrestha9636]

Spread operator saves prev value mean how does it work.....is that like if we write for name input it will is save that in values and so on???? ......and why we write in array for keys???

[@WinYourSoul]

Thank you so much for this video.

[@SUBINON]

you are amazing. way of teching of u us fabulous.

[@vinaypatil8009]

Sir I didn't understand single thing from this tutorial Please make another video for Form validation in Reactjs

[@malumastatus5854]

same

[@rajat-s-kale1771]

Your teaching is awesome

[@letsshowdesigns]

Thapa brother please also cover Redux topic in this series.

[@kamleshpawar9483]

Vindo sir, A humble request you to create videos for Redux. We want to know what is it, when and why to use it ? Thanks

[@freshcollection5911]

I also want to learn React with Redux...

[@youfather38392]

It is created🤞🤞

[@sameerdevil8875]

In this series, this is yours first little bit complicated video but still fine 😄

[@ramgopalkashyap8266]

After watching 5 times I was able to understand awesome

[@oook3407]

ye tareef thi?

[@ramgopalkashyap8266]

Ha tareef hi thi

[@incredibleindia4816]

You got 1 new subscriber sir.. Bhot he informative videos hai vo bhi bhot simple tarike se. Or vo bhi 100% genuine.. Mai bhot time se KZbin use krra hu Bhot saari videos dekhi but vo kuch kaam ki nahi rehti.. unse agar kuch comment me questions pucho to reply tak nahi karte. But aaj maine apki videos dekhi.. God promise fan ho gya hu apka.. bhot accha kaam kar rahe ho keep it up we support you 🥰🥰🥰🥰🥰 #thapaji really love you .. And thanks for this type of videos .. Sach kahu to mere paas word ni hai apki tarif ke liye.. You are the best 😋😍😍😍😍😍😍😍😍🤣🤣🤣🤣😍🤣🤣

[@withbhagyajeet]

thank you bhaiya.. it"s really helpful ...please try to provide the source code along with the vdo.

[@Muhammadwaseemkha9003]

after watching 10 times and try kia and Thanks to My ALLAH aur apka mjhy samjh aaa gya

[@divyanshchaudhary7063]

Bro pdaya toh isne tha toh isee thanks kar naa

[@Muhammadwaseemkha9003]

@@divyanshchaudhary7063 any problem you have ?

[@Unknown-Stranger]

@@Muhammadwaseemkha9003 har cheez m allah

[@imshivamshakya_]

Awesome 💓

[@srclub197]

This html file is a template . If you open it directly in the browser you will see an empty page You can add webfonts Meta tag or analytics to this file

[@Muhammadwaseemkha9003]

bht confuse hy pehly wala tareeqa thek hy

[@mayankdutta2832]

thapa bhai mauj krdi tumne to

[@rajbannasa7662]

thank you so much sir

[@chandrapalyadav6863]

Thanks..broo

[@myselfsohit]

#Enjoying a lot ...........

[@vikashsinghrajput8407]

आग है तू भाई

[@saurabrakshit405]

Thapa Bhai how to limit number type input box length so that it will take only 2 digits not more than that? In ReactJs

[@sankettalekar5557]

from where can i get the codes of this entire series of react ?

[@drashtivaghasiya6811]

I have inut field and i need to print the input value in table column when user press enter key. Plz sir send me tips to solve this problem

[@bhakuninavneet3906]

Thanks sir

[@parveen545]

Thapa bhai zoom to the starting me hi kar diya karo, mobile me easy rehta hai dekhna aura samjhna, thanks

[@omkarjadhav7032]

vinod sir , please make playlist on react redux

[@pranjalgupta9427]

nice explanation

[@bluemaroon10]

Bhai kya Redux sikhaonge is series me?

[@turnandtwist]

Thanks for the concept clearing video. Pls let me know how I can handle form based on radio buttons. Suppose I have two radio buttons n I have same form for both then how I will manage state n post data for each radio button info.

[@webcode6071]

U r awesome

[@NeerajSingh-ch7wl]

please make a video on sidebar with hamburger menu...

[@mayankkandari6794]

( hmr waiting for update signal from wds...) i am getting this message on my console. Can you suggest me any solution?

[@pavanrao2965]

Good video

[@sankalpaneupane5954]

const handleChange = (e) => { setformData(prevFormData => { return{ ...prevFormData, [e.target.name]: e.target.value } }) }

[@muhammadqasimnouman7261]

sir what if we have to show data on submit button ?

[@afaqahmad8918]

I watched this video 2 times but didn't get the concept. should I move to the next videos ?

[@vrajpatel0218]

mene first barr video dekha to muje kuch samaj me nahi aaya ,but mene firse video dekha or sathme code karta raha tab pura video samaj me aagaya to thank you so much 😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎

[@ZahidKhan-th8pz]

Bahot complicated tha smjh jb aane laga to fir kuch aesa bata diya ki confused ho gye

[@mdjakaria1540]

watch this video 3 time and practice 1time and analize 2 time it will easy

[@imran22]

watched video 4 tiimes... coded same...ERROR : TypeError: Cannot read properties of undefined (reading 'fname') Please anyone can help?

[@DEEPANSHU_NAG]

Plz *_react_* se ek *_website_* create kre and backend programming *_Node JS_* me and database *_MongoDB_* use kre...

[@ThapaTechnical]

Sure

[@DEEPANSHU_NAG]

@Abhay Pratap NO

[@DEEPANSHU_NAG]

@Abhay Pratap from internet agar aap ek do programming languages jante ho ya intermediate/master kiya h toh aap other programming language sheek sakte ho online books padkr and internet se reference lakr very easily sheek skte ho

[@gouravmishra7291]

​@Abhay Pratap hello bhai , have you learned react js and create project on it

[@bnodonprojukt2124]

video num 39 & 40 from react playlist are the same.

[@sufisufyan6489]

zabardast

[@Tahirkhan-hv3jn]

abi tk ke sare video smjh agye.but ye wali video hadd se zyada confusing hai

[@tasneemkhan1405]

Thanks sir ji❤️🤗 Awesome

[@mumarishaq7200]

It is difficult plz make one more on it with details

[@divyanshchaudhary7063]

2-3 bar dekh samjh jayega bro

[@yasirsohail9986]

Please make tutorial on React native 🙏🙏🙏 hma sirf apki smjh ati

[@nitinkumarjain7243]

its more complicated i expecting much better but itsmore difficult than prevoius one...

[@faizanahmedsiddiqui5703]

i like the way you teach but you made this topic very complicated and difficunt to understand!

[@jashanpreet832]

Kya baat hai

[@simsingh6196]

Bhai last me input me value vala attribute uncomment kyu kiya, itne same name k variables hai..can anybody explain..@Thapa

[@mirzaumar6830]

Bro can you display this data in a table?

[@creativeeducator1786]

good

[@nileshdhangar6822]

Actully your called fname and lname with defining is error shows when I write like you but when I write Fullname.fname and Fullname.lname it work and its also showing error on that attribute are undefined so what's the solution?

[@koratharshil966]

h1

[@kaustavbasu8250]

Very complicated sir.

[@tazimansari1243]

This video is very confusing 😵😵😵😵 But l love your content

[@NeerajSingh-ch7wl]

ok forms ka data ko store kaise karege backend pe....

[@souravdhara8621]

first time complex laga muje 😅😅😅😅😅

[@creativeakshara8438]

Thapa bhai you are great 👍 Please make a coding app for Android like vs code editor please 🙏🙏 Because you know everything 😇

[@vikaschavan4901]

Please java in one video 🇮🇳🇮🇳🇮🇳

[@yasirsohail9986]

Please react native pr tutorial bna do

[@medipakpagare]

Sir, ye values heading me show karneki koi need nahi thi, isse bohot complicated ho gaya ye. Aur previous wala to 2-3 days se try kr raha hoo bt nahi samajh aya kuch.

[@praviningavale2706]

Hi can we write the code without "value" attribute ?? is it necessary to use ???

[@nicetomeetugaming7024]

Value attribute is very important if you want to create login forms.

[@pronobmozumder]

WATCH THIS VIDEO, ONE MORE TIME. EVERYTHING WILL BE FINE.

[@abhisekmishra3523]

This video is useful but i have a doubt.. when i try this: if(name === "fname") { return { fname: event.target.value, lname: prevVal.lname, age: prevVal.age, gender: prevVal.gender } } and change the input field for second time it shows TypeError: Cannot read property 'value' of null but when i destructure the event name and value it works fine how ???

[@amenaaktersuborna5085]

may be it's becoz u r using event.target.value under the -if condition . if we use const value=event.target.value then it will assign(store) the value just 1 time .so the value ramain same under every 'if condition' . so store the event value (event.target.value) before working under if condition

[@digitaldeveloper7635]

This is the first video which confused me

[@Naiem_webdesign]

Mee to brother.

[@SAADKHAN-qh3bp]

multiple select option ki value kasy get karen gy?????????????????

[@adityarai8111]

bhai ye last se same kaise hai?last me button pe click pe ho rha tha aur ye aisa login form kha hota har jgh to click pe hi hota

[@aniketbhalla1521]

Until the knowledge of this video, in the inputEvent function, we can also write the following: (e.target.name == 'fName') ? setFullName({ ...fullName, fname: e.target.value }) : setFullName({ ...fullName, lname: e.target.value }); if we don't want to use previous state of the component. Rest what thapa sir has teached us is also very good and very simple to understand. Thanks sir.

[@rohitrout6450]

bro why cant we create a separate variable outside suppose (prevfirstname,prevlastname) and as soon as user enter something than in the change function we will do if --------------------------------- let prevfirstname,prevlastname; const change(){ if(e.target.name==="fName") prevfirstname=e.target.value; else prevlastname=e.target.value; setName({fname:prevfirstname,lname:prevlastname}); } ------------------------------------- why this don't work?

[@nicetomeetugaming7024]

@@rohitrout6450 your function and if else syntax is wrong bro, syntax for function : const function = () ={}, syntax for if else : if(){}else{}

[@itsumair001]

I think the long previous method is better then it

[@RahulGupta-wh7or]

sir i am facing problem on this videpo i have written same code in my machine but it's give me an error please help me sir error is object is not valid as a react child found object keys {name,password,email} if you meant to render a olletion of children use aaray instead

[@ibnaskhan]

Rahul Gupta hello bro 1 year ho gya is comment ko . react js acche se sikh gye ya nahi plz reply

[@virendrasinghbhanu1267]

it is so complicated

[@rashidarani3674]

lname=prevalue.lname is up to me

[@abhinavsharma4197]

Mix-Veg video, could've used a better naming convention!

[@sagarkamble3538]

how your code automatically indented when you hit ctrl+s,

[@eagerboy2219]

use extension name : prettier

[@sid.26]

Error: Cannot read properties of undefined (reading 'fname') Please help

[@user-cs3lo6pf4e]

same problem

[@reeshabhkapoor7]

I can't see hooks state in react developer tools...Anybody else facing the same problem?

[@muhammadmujtaba7817]

before running npm start use npm run build

[@vanshgupta312]

bhai source code ke naam pe tumne apne website ki link de rakhi hai to banda source code kaise dhundega

[@debankar99]

backend part kaab ayega?

[@EWorldHub]

ye video 2 times kyun add kiya playlist mein. 39 and 40 are same videos. please remove 40th no video from playlist

[@rashidarani3674]

es bnday ka concept theek nhi abi previousValue to add kr rha lakin smja nhi rha k eska kam kya hai o bhai ye previous state hai jab app fname main value add ker rhay ho to basically fist state ki value update ho rhi to phr previous state ko kasay deal kr rhay ye to smjhao r video to fazool main itna long krtay ho

[@EWorldHub]

@@rashidarani3674 watch on 1.25x speed Or 1.5x speed don't waste time

[@srclub197]

When I type inside input field it disappears

[@suchibhargav5868]

Throwing error when I type last name-- cannot read property fname of undefined

[@SandeepSharma-jh2hd]

I am facing the same error!

[@knowledgeera3210]

Watch this video 2 times then u will get the actual concept......

[@atuljain4834]

Hi Mr Thapa, I am getting an error when using const [fullName,setfullName] = useState({ fname:"", lname:"" }); Objects are not valid as a React child (found: object with keys {fname, lname}). If you meant to render a collection of children, use an array instead. Please help

[@rohitrout6450]

May be you are declaring state inside return function

[@khanansari3456]

May be change you extension js to jsx

[@bhushan8002]

Return karta time hamna { } walli bracket kyu use kii hai instead of ( ) this bracket Kya object banaya hai Fullname ka ishliya kiya hai ya koi aur reason sa kiya hai

[@bhushan8002]

Please answer me

[@anti-tankartur677]

kyuki tum yaha object return kar rhe ho, aur defualt object is enclosed withing curly braces. Isiliye instead of defining an object and returning only the name of the object, thapa idhar directly object ko return kar rha. For simplicity, just imagine ki return ke bad khali ek variable ka naam hain, baki sab maat dekho tab samajh aa jayega.

[@anupsrivashtava2676]

Sir apne fat arrow function banaya fir hata kar curly braces use kiya ye thora confusing hai . Help any one.

[@rahul-java-dev]

Sayd wha glti ho rhi thi, islye video edit kiya gya and next time unhone ek object bnaya.

[@anupsrivashtava2676]

@@rahul-java-dev may usi ke karan galti ho raha ho

[@srclub197]

In my browser it's showing like below