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

[@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😃

[@prasiddh283]

Most underrated channel of KZbin👏

[@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

[@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 ❓

[@divyanshchaudhary7063]

Bhai tune itna complicated kardeya ye topic

[@BeardYatri]

sach mein

[@ncmanik-star]

This seems more complicated than previous login page

[@anandatype7442]

ys brdr

[@sanketsuryawanshi]

Best KZbin channel ever

[@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🤞🤞

[@md.jubairahmed4097]

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

[@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???

[@ramgopalkashyap8266]

After watching 5 times I was able to understand awesome

[@oook3407]

ye tareef thi?

[@ramgopalkashyap8266]

Ha tareef hi thi

[@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

[@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.

[@vinaypatil8009]

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

[@malumastatus5854]

same

[@asmereg]

Thank you, Bhai. You teach really great💜🔥

[@hardikpoudel3011]

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

[@rajat-s-kale1771]

Your teaching is 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

[@Deepak-gj4ni]

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

[@bluemaroon10]

Bhai kya Redux sikhaonge is series me?

[@Muhammadwaseemkha9003]

bht confuse hy pehly wala tareeqa thek hy

[@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 😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎

[@sameerdevil8875]

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

[@SUBINON]

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

[@vanshgupta312]

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

[@mayankdutta2832]

thapa bhai mauj krdi tumne to

[@basiceducation7327]

Loved the way you teach 👍

[@sankettalekar5557]

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

[@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

[@afaqahmad8918]

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

[@sankalpaneupane5954]

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

[@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{}

[@mdjakaria1540]

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

[@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

[@WinYourSoul]

Thank you so much for this video.

[@withbhagyajeet]

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

[@tasneemkhan1405]

Thanks sir ji❤️🤗 Awesome

[@anupsrivashtava2676]

Sir ye prevalue.lname me error bata raha hai . Pls help. 18:28 me.

[@rahul-java-dev]

Same here bro.

[@anupsrivashtava2676]

@@rahul-java-dev to fir apne correct kaise kiya . Wo code apka run kiya ya nahi agar kiya to kaise . Pls tell.

[@rahul-java-dev]

@@anupsrivashtava2676 Sorry yaar...hmse bhi nhi hua.. bs code complete kr diye.

[@anupsrivashtava2676]

@@rahul-java-dev agar ho to pls batana . Try karna to .

[@rahul-java-dev]

@@anupsrivashtava2676 if(name === "fName") { return{ fname : value, lname : preValue.lname, email : preValue.email, phone : preValue.phone, }; } Note : return ke baad curly braces usi line me hone chahiye. if(name === "fName") { return { fname : value, lname : preValue.lname, email : preValue.email, phone : preValue.phone, }; } Ye galat hai. Unreachable code ka error aa rha tha is'se n.

[@faizanahmedsiddiqui5703]

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

[@pronobmozumder]

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

[@Tahirkhan-hv3jn]

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

[@rajbannasa7662]

thank you so much sir

[@mumarishaq7200]

It is difficult plz make one more on it with details

[@divyanshchaudhary7063]

2-3 bar dekh samjh jayega bro

[@sid.26]

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

[@FenilKhoyani]

same problem

[@tinkumehateraho]

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

[@imran22]

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

[@myselfsohit]

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

[@digitaldeveloper7635]

This is the first video which confused me

[@Naiem_webdesign]

Mee to brother.

[@pranjalgupta9427]

nice explanation

[@parveen545]

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

[@mayankkandari6794]

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

[@tazimansari1243]

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

[@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

[@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

[@ZahiidKhan262]

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

[@imshivamshakya_]

Awesome 💓

[@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 😋😍😍😍😍😍😍😍😍🤣🤣🤣🤣😍🤣🤣

[@muhammadqasimnouman7261]

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

[@digitalparvej5570]

bhai select tag ko kese tag kare wo state in nahi aa raha hai

[@chandrapalyadav6863]

Thanks..broo

[@vikaschavan4901]

Please java in one video 🇮🇳🇮🇳🇮🇳

[@PavanJRao]

Good video

[@souravdhara8621]

first time complex laga muje 😅😅😅😅😅

[@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

[@bhakuninavneet3906]

Thanks sir

[@SAADKHAN-qh3bp]

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

[@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.

[@praviin_ingavalay]

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.

[@bnodonprojukt2124]

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

[@kaustavbasu8250]

Very complicated sir.

[@BhushanGodwal]

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

[@BhushanGodwal]

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.

[@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

[@omkarjadhav7032]

vinod sir , please make playlist on react redux

[@creativeakshara8438]

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

[@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

[@mirzaumar6830]

Bro can you display this data in a table?

[@srclub197]

When I type inside input field it disappears

[@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

[@simsingh6196]

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

[@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

[@debankar99]

backend part kaab ayega?

[@readerfromearth]

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

[@eagerboy2219]

use extension name : prettier

[@yasirsohail9986]

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

[@NeerajSingh-ch7wl]

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

[@NeerajSingh-ch7wl]

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

[@digitaldeveloper7635]

Confused 🤣🙈

[@vikashsinghrajput8407]

आग है तू भाई

[@creativeeducator1786]

good

[@jashanpreet832]

Kya baat hai

[@yasirsohail9986]

Please react native pr tutorial bna do

[@vikashsinghrajput8407]

Bhai tu kitni salery earn karta hai

[@ayaniegain]

2lc per week

[@user-un3lj7iu7v]

Getting error objects are not as a react child fname and lastname inside useState function

[@user-un3lj7iu7v]

Reply please

[@abhisheksrivastava9788]

Check your return there you would be returning object rather than its value eg: fullname.fame not fullname

[@webcode6071]

U r awesome

[@suchibhargav5868]

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

[@SandeepSharma-jh2hd]

I am facing the same error!

[@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

[@knowledgeera3210]

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

[@sahilsharma1inspirationalTape]

it is just the waste of time making simple things most most most complicated in the milkyway galaxy

[@MuhammadShoaib-tb9wu]

I can not understand where i watching this again and again. Its so confusing.

[@srclub197]

In my browser it's showing like below