Login Form Submit in React Js in Hindi in 2020 #35

************* Must Watch Videos For Web Development *************
➡️ Hooks in React JS in Hindi | useState in Hook in React JS: kzbin.info/www/bejne/iYSUemqjYqxloc0
➡️ Array Destructuring in ES6 in JavaScript in Hindi 2020: kzbin.info/www/bejne/h3KxeGl3ZpKtobM
➡️ Object Destructuring in ES6 in JavaScript in Hindi: kzbin.info/www/bejne/oWfcfoSehduVqK8
➡️ React DevTools & Source Code Link: www.thapatechnical.com/2020/05/react-developer-tools-in-react-js-in.html
➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: kzbin.info/aero/PLwGdqUZWnOp3aROg4wypcRhZqJG3ajZWJ
➡️ ReactJS JavaScript Array Map Method in Hindi with Example: kzbin.info/www/bejne/e3a3oqGshsuje8k
➡️ Fat Arrow Function in JavaScript in Hindi 2020: kzbin.info/www/bejne/r17FoIuCgdx8frM
➡️ #23: Array in React JS in Hindi | React JS Project Netflix App #2 in Hindi in 2020
➡️ Array in JavaScript in Hindi: kzbin.info/www/bejne/sHjPqYKulN2Gl7s
➡️ #22: React JS Project Netflix App Part #1 in Hindi in 2020: kzbin.info/www/bejne/foPLe4l9n66ll6c

➡️ Install VS Code for ReactJS LINK: www.thapatechnical.com/2020/05/install-reactjs-windows-install-nodejs.html
➡️ Check Complete Reactjs in One video here 👇 kzbin.info/www/bejne/amSsk3l6iLuXeJI
➡️ HTML in One Video: kzbin.info/www/bejne/pn-ac3mCm7idfNk
➡️ CSS in One video: kzbin.info/www/bejne/npy0p2OEft1-h7s
➡️ CSS FlexBox in 30 Minutes: kzbin.info/www/bejne/bH2QgXSjj8adnKM
➡️ JavaScript in One video: kzbin.info/www/bejne/hoCnmIONYs2VnLc
➡️ ECMAScript 6 in One Video: kzbin.info/www/bejne/f5bOZXeqh9SVgqM
➡️ HTML5 in one video: kzbin.info/www/bejne/aoeTXoymhJJ-kNE
➡️ CSS3 in one video: kzbin.info/www/bejne/infVd6ttfZqNf5o
➡️ Bootstrap4 in One video: kzbin.info/www/bejne/r4vRf6GsjbRrfqs
➡️ Jquery in One video: kzbin.info/www/bejne/hn_ZqoN7hpWsY6s
➡️ JSON in one video: kzbin.info/www/bejne/mH7UlqmGgKaDepY
➡️ ReactJS in one video: kzbin.info/www/bejne/amSsk3l6iLuXeJI
➡️ PHP in One Video: kzbin.info/www/bejne/aWGVZX6Za7h3gJI
➡️ NodeJS in one video: kzbin.info/www/bejne/n6HRiHSBpM51qg
➡️ MySQL in one video: kzbin.info/www/bejne/a5OpqZWtn7Ngfc0
*********** CLICK HERE TO WATCH *************
➡️ Fetch API in JavaScript: kzbin.info/www/bejne/iqDNhIuFqqyIjZY
➡️ AJAX tutorial for beginners in Hindi: kzbin.info/aero/PLwGdqUZWnOp3ZgLj8upMGSRSC1ezBfEZs
➡️ Template literals (Template strings) in ES6 in JavaScript in Hindi: kzbin.info/www/bejne/h5TTmWZ9d5Z9fNU
➡️ Async Await in JavaScript in Hindi: kzbin.info/www/bejne/nneviXhrYq92mdU
➡️ Promises in JavaScript in Hindi: kzbin.info/www/bejne/rnilmaCfadyqg6s
➡️ Callback Hell in JavaScript: kzbin.info/www/bejne/nKOZaKhvbdOWoc0
➡️ Advanced JavaScript in Hindi Playlist: kzbin.info/aero/PLwGdqUZWnOp0hSGwasCjbrWSPrEKqB_kz&disable_polymer=true
➡️ ECMAScript Tutorial in Hindi 2020: kzbin.info/aero/PLwGdqUZWnOp19VX-DM4oHtmWhDfWblFh-
➡️ ES5 & ES6 | ECMAScript 6 in One Video in Hindi: kzbin.info/www/bejne/f5bOZXeqh9SVgqM
➡️ JavaScript Game Development Series in 2020: kzbin.info/aero/PLwGdqUZWnOp1Ub0K1CBuLxLOEN6wTq2bg
➡️ Source Code Link: www.thapatechnical.com/2019/11/how-to-get-source-code.html
➡️ Top 5 Programming Languages in 2020: kzbin.info/www/bejne/mavVoIxro6Z3ZsU
➡️ Ludo Game JavaScript Link: kzbin.info/www/bejne/laXPn5ago5Z9prc
➡️Plz show some love to My Siter KZbin Channel and Plz Subscribe Link: kzbin.info/door/Est8yZ12JEYsSVVXmtU7GQ
***************** MUST WATCH VIDEOS ******************
➡️ How to become a Full Stack Developer 2020: kzbin.info/www/bejne/m6W9ZZ2nlL6dr68
➡️ How To Become a Web Developer 2020: kzbin.info/www/bejne/i6OcfXqMiZJ6jtU
➡️ How JavaScript Works: kzbin.info/www/bejne/jJKlgWmVpaeCna8
➡️ Follow me on Instagram: vinodthapa55
Make Website Responsive Using Media Queries in One Video in Hindi | Web Design Tutorial in Hindi
➡️ Link: kzbin.info/www/bejne/mXy1apqwmNRmgcU
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: vinodbahadurthapa/?ref=aymt_homepage_panel&eid=ARCTi5kdE1POliSOXnW51qZdo6NcpcSOqrioqut1KDac_CfgY5OCey-vcHlgRDgc_OK6eYNFCF_Rrfiq

[@ThapaTechnical]

Sorry aj late hogaya upload krne me :) ➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: kzbin.info/aero/PLwGdqUZWnOp3aROg4wypcRhZqJG3ajZWJ

[@bakasenpaidesu]

;)

[@manishsharma-qw2uz]

I'm just waiting for your new video, Thank you :)

[@lohitkumarpatra6906]

Sir aapka video hamisha wait Kate hain, concept clear ho raha hai,love u sir...

[@rajat-s-kale1771]

Your teaching is awesome bro , Thanks for making REACT so easy ....

[@Muhammadwaseemkha9003]

sir ajj app sy pehly mene ye khud bana liya thank you sir apki wajah sy

[@ayaniegain]

thank you, brother, for your awesome video. God bless you so much.....

[@asmereg]

Bohot sahi Sir, keep doing it. Learnt a lot🤍🤍🤍🤍🤍

[@krazy_lukhnow]

very simple and enjoying and helpfull video thaukyou sir

[@suprabhatsahoo2782]

Learning after 3yr🥺🥺🥺 you're so good teacher.

[@kiyochi7705]

we can do one thing. we can do setFullName(`${firstName} ${lastName}`). No need to create another useState() function

[@sunil_kumar_jodhana]

Amazing explanation keep it up and spread up your knowledge bro

[@shashwatnandan5083]

best tutorial of react on intrernet still relevent in 2024

[@debankar99]

waiting for the backend part

[@EWorldHub]

Superb... Perfect

[@TechWithDnes]

Awesome!

[@kishandave722]

Awesome 🔥🔥🔥

[@deepikakapoor9607]

Thank you so much ☺️

[@DEEPANSHU_NAG]

*_Awesome_* video as always ✌🏻💯 keep it up

[@ThapaTechnical]

wow aj itni jaldi reply mast yar

[@DEEPANSHU_NAG]

@@ThapaTechnical wait kr rhe the

[@ThapaTechnical]

@@DEEPANSHU_NAG :) so sweet

[@funnysid8180]

Bhai tussi great ho

[@rajbannasa7662]

thank you so much sir

[@Thelalaharsh009]

Playlist of react is really fantastic 👏👏 Bhaiya one more thing plz tell about "Tachyons" how to install in VScode ??

[@programmer1783]

Thank you bro

[@jashanpreet832]

Finally understand

[@br6785]

Thanks for this video. Only yesterday I had this issue while doing my react assignment that whenever I was clicking on the button the data had to be displayed on screen (same page) but instead the page was refreshing and data wasn't displayed. Then I removed the button tag from form tag and the issue resolved.. but I didn't really understand why it was happening but now my confusion is clear. So basically the form tag has this property to refresh the page on button click.

[@webcode6071]

Ur awesome

[@bhakuninavneet3906]

Thanku sir

[@MANPREETSINGH-ft9hd]

Thanks bro. Bro make one project live

[@sailendrachettri8521]

This video ate all my mind :(

[@pranjalgupta9427]

awesome

[@surattech6159]

Hello sir, Make video on checkout with coupons code and adding COD OPTION FORM

[@aadarshpandit1773]

very nice

[@sachinsubudhi6145]

@Thapa Technical How can we apply form validation using Hook up concept?

[@yoyocr2034]

Maza aa geya bhai

[@ayushthakur2896]

do u want to complete the playlist together?

[@yoyocr2034]

@@ayushthakur2896 yeah sure.. why not

[@krishnaTiwari851]

Can we use let keyword instead of const while declaring usestate hook

[@aamirsaleem5294]

osm

[@muhammadqasimnouman7261]

hello vinod sir, hum input field ma value attribute k bina bhi apna ye wala kam kr skty hain... please guide me

[@rahulprasad5904]

Thapa sir .... Data structures in one video bnaiye plz.... Its a request...sir ... Jisme (stack,queue,linked list) sb ho.... And thanks for your awesome videos ...😇😇

[@anujyadav3304]

okkk banaunga

[@tusharkirve4114]

Awesome Videos Vinod, just have a small confusion... Why do we need 4 state here. We can use one for first name n second for last name to change H1 state. Instead of other two, we can use global variables to store values and update in state function. Hope u understand my question...

[@vineetjadhav7875]

Same doubt

[@anti-tankartur677]

Yes I had the same question. Just use 2 variables to store the value during onchange and then assign them using set function

[@umeshnama2552]

just want to know, you created input field with onChange event, so it means, i have bigger form there is lots of fields so you accordingly, we'll create multiple events with variables as well. is it correct way?

[@user-uy2ku3oz4i]

I too have same doubt.

[@rohansingh204]

Hi bro, I have to make a login page using reactJS but I have to also use validation like I have to manually store username: admin and password: admin and need to match at the login time that username and password are matching or not. Can you please tell me, How can I do.

[@imranullah7672]

sir good working sir ager ap multi user login pi videos banaiy to mahrabani hogi thanks sir

[@ghumakkad_yogi]

sir agar apne ko login data store karma ho to kese aur kaha karenge

[@CodeWithSajjan]

And bro please also teach us state management tools like redux and context api... plzzzz u can skip redux... Love from Nepal 🇳🇵 from 15yr boy

[@EWorldHub]

wow 15 Years Old.... Gr8

[@CodeWithSajjan]

@@EWorldHub Thank You.

[@thecoderraj3777]

waah yaar! 15 ki umar mei, itna sabh knowledge kaise, aur apne channel pe Backend Node ke tutorials bhi hai, waah g, boht khooob, lekin kaise aapne kiya itna sabh 😃

[@CodeWithSajjan]

@@thecoderraj3777 just passionate about tech and programming stuffs😁

[@mohsinbohra1174]

Waiting for Redux part

[@abhishekva449]

How to use bootstrap jq code in react? Like menu collapse

[@pankajuprety9216]

bro please show video connecting mongodb and react js in django

[@zafarhussain8273]

sir yeh bahut complex tha

[@NeerajSharma-sk2rs]

thanks thapa bhai but ek query hai 3 useState se work ho sakta tha wo jo lastName hai usi ko me daal dete baat ban jati maine karke dekha submit ho gaya tha

[@chandasingh2415]

Thanks bro, can u make employee evaluation system project, plzzz...

[@shivamshrivas9129]

I can develop it

[@good114]

💕❤️❤️💕

[@hannanafridi1649]

Vinod bhaiyaa...aapke paas full Backend ke playlist hai kya??

[@ermahesh2009]

Sab samaj mai aa raha hai

[@techreview588]

kya hum full name me he dono ko concat kar saktey ha . button ko click karney par? like..... setFullName(name + lname)

[@NadeemKhan-iw9ow]

brother main bahut kosis kar liii TAILWIND CSS koo REACTJS se integration karne ki lekin hoo nahi paa rha hai too aap video banaye uss par aur integration kare yaaa phir mujhe kuch bata dijiye jisse kii TAILWIND CSS integrate hoo jaye main official website bhi dekhi hai lekin kuch problem hoo rha hai isliye aap kare yaamujhe kuch aisa bata de jisse mere liye asasni hoo jaye umid hai aap comment padhege...and you are doing well brother...i really enjoy your video and lots of learning from you....

[@Armankhan-jy4eb]

(UserType1, userType2) Login ke baad page redirect karna hai. agar userType1 h to different dashboard par or type 2 ho to different dashboard pr redirect ho jaye??? plz btao any video

[@jainilpanchal522]

can you make .net core joints with react.. something ???

[@dilips8410]

sir video me jo coding karte ho use last me ek saath dikhaya kara coding ko

[@premsingrathod1644]

Bhai im a first in your channel can you please send css

[@RadheyNameKaSahara]

sir video asusual bht achi thi. pr sir dimad m na kichadi ban gai .. kuki apne last video k propective se theoritical bataya.. agr ap ek likh batate to thoda jyda clear hota concept.

[@muhammadjunaid3684]

04:20 - It's not a bug, it's a feature.

[@shahid643]

How to clear file input after form submit along with other input fields in React Form... please help me... Thanks in advance :)

[@The_Daily_Shorts]

setName('') add this inside the click or submit function

[@kartikshirke8223]

agar form mei 10 field honge tou 10 bar use state use karna hoga?

[@ThapaTechnical]

Nai

[@jagdishjena9058]

sir plz eske baad Angular and MEAN Stack karvana

[@RandomVideosOfficial2002]

const [name, setName] = useState("Nadir"); const [password, setPassword] = useState("L-N"); const [buttonState, setButtonState] = useState(); const onChangeEventName = (event) => { return setName(event.target.value); }; const onChangeEventPass = (event) => { return setPassword(event.target.value); }; const onClickEvent = (event) => { event.preventDefault(); return setButtonState(`${name} ${password}`); }; sir hum is tarah bhi karsakte hain agar 4th state na banaen.

[@muhammadtoqeer6381]

Onchange event 9:33 and suddenly move next

[@himankverma125]

so complex to understand for a person like me 😥

[@bushranikhat2326]

Mera 3 useState me ho gya ...

[@muzammalrafique1293]

i have i5 with 4 GB RAM 320 ROM can i install React on my machine with this specification safely please guide me please guide me i am watching your course from Pakistan please reply me i will wait for your response sir thanks

[@ayaniegain]

yes, no problem you can do this. it's not a heavy software, initial installation may be its take time but before that its all fine.

[@ankitrikame336]

2 baar dekhne ke baad samjha

[@srijitamandal7678]

We can do it on another way Like this: const onSubmit = (event) =>{ event.preventDefault(); const showFullName = name + " " + lastName; setFullName(showFullName); } So, we don't have to use another useState();

[@iftekhar_ansari]

exactly , but you can also use string template inside the setFullName() like setFullName(`${firstName} ${lastName}`) by this ,anothe variable is not requierd to store the fullName

[@bakasenpaidesu]

;)

[@gjtechnical3179]

10:22

[@rihajul]

bro.. Facebook may kese apse connect koru.?

[@kashmirtechtv2948]

Bht s log Typescript ko use krna ka bolty. Us k bary m kea kahein gy ap?

[@Vi99770]

sir apne zoom karke nhi bataya read karne mai diffculty oraehe hai bhauth

[@PRIYAKumari-zm1ql]

Please provide source code of login page.

[@sumitmaharjan2494]

39 and 40 is the same video

[@zainali3517]

import React, { useState } from 'react'; function App() { const [name, setName] = useState(''); const [lname, setlname] = useState(''); const handleSubmit = (e) => { e.preventDefault(); setName(e.target.name.value); setlname(e.target.lname.value); } return ( Hello {name} {lname} Submit 👍 ); } export default App; shortest method

[@aakashsharma1126]

hook part in these video not understand

[@tonikroos6895]

this was so confusing.....

[@tonikroos6895]

but was good

[@nirajbava]

bar bar yekhi bat mat hola kro bhai

[@oxtryscloud2440]

In this whole series this is your worst part

[@gauravverma1374]

In this video u waste lost of time....

[@chiragdarekar2353]

event.preventDefault(); is not working

[@itspawanpoudel]

you can handle both input field with single function and state Here is the code: import React from 'react' const SimpleForm = () => { const[userName,setUserName]=React.useState({ firstName:'', lastName:'' }); const[showUserNmae,setShowUserName]=React.useState(''); function captureData(event){ let value = event.target.value setUserName( {...userName,[event.target.name]:value} ); } function showUser(event){ event.preventDefault() setShowUserName(userName) } return ( Hello {showUserNmae.firstName} {showUserNmae.lastName} Submit ⚙ ) } export default SimpleForm

[@r.kinggaming5077]

Sir Please Check this onSubmit Code: const submit=(event)=>{ event.preventDefault(); setUNamePass(uName+uPass); }