#37: React Login Form Challenge in React in Hindi 2020

Welcome, how to React js challenge on the Login form in Hindi.
************* 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]

hey guys, aj kal ekdum busy hone ke karan din me ek video aara hai but jaldi he 2 aane suru honge ➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: kzbin.info/aero/PLwGdqUZWnOp3aROg4wypcRhZqJG3ajZWJ

[@DEEPANSHU_NAG]

It's ok 👍🏻 *_React JS_* ke baad kya series aayega❓

[@VijenderSingh-rr5zt]

I need to call.. demo json api, through function component, pls make video

[@aashitkumarsinha3459]

sir sticky header or navigation bar par video bana sakte hai.

[@cthulhulalala7182]

Great video bro...i regularly suggest your video to everyone haha

[@kishorkumarsoni]

Awesome thapa bhai thanks 👌

[@letsshowdesigns]

And after completing the series make full website in react perform both front end and back end .

[@rajat-s-kale1771]

your teaching is awesome

[@Magic_of_code]

That's great 👍

[@adilrao7777]

Make one or two challenges videos in which we can get the data when we submit the form and then delete it and then update it, means simply CRUD, kindly if possible sir. This will be very beneficial for us. And u r great sir❣❣

[@rajbannasa7662]

thank you so much sir

[@ashishkumarsahoo6966]

u r amazing sir

[@webcode6071]

U r too good

[@mdabuabdullah1282]

Respect from Bangladesh. And after completing the series make full website in react perform both front end and back end

[@aamirsaleem5294]

osm

[@EWorldHub]

Superb

[@shumonuddin6806]

thank you for excellent videos, though Hindi is not my 1st language, still, I can understand that. used to watch lots of Hindi movies before. could you please check the playlist, some of the videos are repeating in the list, #18, JS Practice #4, #26, Challenge #6, #34, #35, #36, #37 thank you once again for all those awesome videos. :)

[@noobCoder26]

awsome

[@afaqahmad8918]

wow

[@FightAgainstMathsFear]

THAPA Bhai first 💓 Viewer and comment Please make a coding app for Android like vs code Editor 🙏🙏 Please reply I am first comment and view And make a video on how to solve JavaScript problems Because muze sab ata hai par jab JavaScript ki koi project banata hu tu atak jata hu 🙏

[@zafarhussain8273]

east and west Thapa is best

[@mayursaroj4360]

❤

[@letsshowdesigns]

Please also cover redux with this series

[@adarshdwivedi5395]

Automation using react plz make..a vedio

[@sciencetub]

What to do if the form has a textarea also?

[@krishnajadhav4213]

Sir you all video is very good.Sir Angular 9 ke video bnaeye na, post api with form submit Angular me bnaey na plzzzz

[@samirbante8554]

Itna hard hai ki nind aa gaye

[@massamzohaib1421]

Sir ap ki video boht kamal ki hai. Kya pls ap aik video banasakte ho ke react ki website online kaise dalen

[@quackcoder2246]

Plzz make video on website intro animation... Plzz

[@sushantrahane4512]

Please make video of form validation using jQuery validator

[@aashitkumarsinha3459]

sir can you made a video on sticky header or navigation bar on scroll.

[@viraltrendings3756]

sir it is showing that name is deprecated ? now what will we do ?

[@Magic_of_code]

If I want data in other page How can do this

[@feezankhattak1573]

You unComment the value = {fullName.fName}, You correctly write on the text field. but When i uncomment it, it gives the same behavior of not writting the any thing on the text fielld.

[@techomkar5630]

Sir please javascript if statment par video banaye....

[@letsknowthis1862]

Bhai pls aaap javascript nested loops ke bare Mein batao na, 2 se zyada nested loops ke bare Mein. Bahut complex hai

[@sumitagoswami9355]

All of the videos are great . awesome work carry on. but some videos has been repeated.

[@shahid643]

Sir React ke sath php me insert delete update ke video kab bnaye ge app ?

[@tasneemkhan1405]

1st😍

[@avanipatel7344]

Hello sir, Your videos are awesome and really helpful. Learnt so many new things from you. .... Sir, can you please make a video on how to make crud app using react js. ... Thank you.

[@nayanbhuyan8156]

Without giving the value attribute, it works fine,why

[@aadarshpandit1773]

Woww

[@vishwajeet.modanwal]

Agar Google News ke baare me pata ho toh batao... Khud ki website ko Professionally kyse dikhaye Google News me?

[@ashwanirao9483]

please provide your full code of each video on your website or description box . it will be of great help

[@nirbhaysingh2504]

First

[@TechLearneryt]

Itne jade if else😆🤣 Is se acha main multiple hook create kr leta 🤣🤣 Wo jada easy hota

[@techomkar5630]

Sir statment if statment par video banao detail me Mai video shard karunka mere istagram par mere followers 3k hai

[@ThapaTechnical]

Menei banaya hai if statement pr

[@thelasttimeitookashowerwas7069]

@@ThapaTechnical yo even if we dont keep value attribute in the input fields, arent they saved automatically in value? coz this code works perfectly fine even if we dont keep that attribute coz as far as i remember, anything entered in input fields are automatically saved to value attributes

[@SandeepKumar-ly4ud]

Why you repeat same code in just four input field.

[@debankar99]

backend kaab araha hai?

[@kashmirtechtv2948]

Kl wli video kea dekhain. Awein kch bnaee v

[@Unknown-Stranger]

What

[@kishanrai7569]

× Error: Input(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. how to solve these error??????

[@Unknown-Stranger]

put a return keyword

[@MrKapbat]

I am not convince sir. If I need to create a form with 15-16 fields. That is going to be big problem to simply fetch and store value in a variable. I am sure something is their.

[@TechMeDude]

function App() { const [fullname, setfullname] = useState({ fname: "", lname: "", email: "", phone: "", }); function submitEvent(event) { event.preventDefault(); console.log(event); setfullname({ fname: event.target[0].value, lname: event.target[1].value, email: event.target[2].value, phone: event.target[3].value, }); } function inputEvent(event) { console.log(event.target.name); } return ( Hello ,{fullname.fname} {fullname.lname} {fullname.email} {fullname.phone} Submit ); } Try this code , much easier

[@mysteriousr7197]

@@TechMeDude thanks,it works,and much simpler than tutorial

[@faizanmirza5566]

@GeekGram but it will not work on onchange

[@anandsrivastav1428]

object destructuring is not working

[@saritadash6554]

m getting an error as..". Objects are not valid as a React child (found: object with keys {fname, lname, email, phone}). If you meant to render a collection of children, use an array instead. " please help sir.

[@mujahidislamkhan782]

same problem

[@Unknown-Stranger]

have u write = instead of :

[@AnkitRaj-lr2hc]

sir kya whatsapp group hai abhi bhi i want to join but i haven't instagram id

[@kifayat80]

Sir provide us the source code

[@oook3407]

i hate coding because of u

[@InspireUShorts58]

vinod

[@A2kash]

Please, correct What is the error in this code????? import React, { useState } from "react"; const App = () => { const [fullName,setFullName] = useState({ fname:"", lname:"", email:"", phone:"", }); const inputEvent = (event) => { // console.log(event.target.fname); // console.log(event.target.city); const { value , ename } = event.target; } setFullName((preValue) => { if(name === "fname"){ return { fname: value, lname: preValue.lname, email: preValue.email, phone: preValue.phone, }; } else if (name ==="lname"){ return{ fname: preValue.fname, lname: value, email: preValue.email, phone: preValue.phone, }; } else if (name ==="email"){ return{ fname: preValue.fname, lname: preValue.lname, email: value, phone: preValue.phone, }; } else if (name ==="phone"){ return{ fname: preValue.fname, lname: preValue.lname, email: preValue.email, phone: value, }; } } ) const onSubmits = (event) => { event.preventDefault(); alert("Form Submitted.") } return ( Hello {fullName.fname} {fullName.lname} {fullName.email} {fullName.phone} Submit Now ) } export default App;

[@A2kash]

There is show this error. compiled with problems:X ERROR [eslint] src\App.jsx Line 16:9: Unexpected use of 'name' no-restricted-globals Line 18:16: 'value' is not defined no-undef Line 23:16: Unexpected use of 'name' no-restricted-globals Line 26:16: 'value' is not defined no-undef Line 32:14: Unexpected use of 'name' no-restricted-globals Line 36:16: 'value' is not defined no-undef Line 41:14: Unexpected use of 'name' no-restricted-globals Line 46:16: 'value' is not defined no-undef Search for the keywords to learn more about each error.

[@chetnakotak5644]

Yes same error

[@AkhileshYadav-lv3kh]

Thank you sir

[@geetamsinghkushwaha8323]

First

[@ThapaTechnical]

congraztz :)