Forms in React JS in Hindi | React Controlled Vs Uncontrolled Component in Hindi in 2020 #34

Welcome, How to handling Forms in React JS in Hindi. we will into React Forms with Hooks which is the trend in 2020. What is React Controlled Vs Uncontrolled Component? In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself. To write an uncontrolled component,
instead of writing an event handler for every state update, you can use a ref to get form values from the DOM.
************ 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.thapatechn...
➡️ 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.thapatechn...
➡️ 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.thapatechn...
➡️ 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.thapatechn...
Instagram Link: / vinodthapa55
Facebook Link: / vinodthapa55
Twitter Link: / vb55thapa
Facebook ThapaTechnical Page Link: www.facebook.c...

[@ThapaTechnical]

➡️ Hooks in React JS in Hindi | useState in Hook in React JS: kzbin.info/www/bejne/iYSUemqjYqxloc0 ➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: kzbin.info/aero/PLwGdqUZWnOp3aROg4wypcRhZqJG3ajZWJ

[@grgsarun9798]

Congrats 150 dubscriber crossed

[@mymobile6271]

Abe kitne bat boom boom karta hai!

[@CodeWithMukeshBadgujar]

@@mymobile6271 🤣🤣🤣🤣🤣🤣🤣🤣

[@deepanshusingh2352]

Boom Guys

[@okeyshourovroy2769]

Vice nice and knowledgeable. Please make a video on django + react

[@kumarshantanu9430]

CSS : *{ box-sizing: border-box; padding: 0; margin: 0; background-color: #d2dbdd; font-family: sans-serif; } div{ width: 100vw; height: 100vh; background: #8e44ad; display: flex; flex-direction: column; justify-content: center; align-items: center; } h1{ color: white; background: transparent; text-shadow: 0 2px 2px black; } input{ width: 50%; padding: 10px 20px; border: none; outline: none; margin: 20px 0; text-align: center; } button { line-height: 24px; padding: 0 20px; background: #9b59b6; color: white; border: 2px solid #ecf0f1; outline: none; border-radius: 5px; text-transform: uppercase; cursor: pointer; }

[@anujpatel3409]

🙏

[@aashutiwari7691]

Thanks

[@23cash86]

ahh man! thanks a ton

[@itssourav5100]

thnx bro

[@gjtechnical3179]

Thanks Buddy

[@its_sanjay06]

your css is OSM and thanks for this amazing playlist 👍👍👌👌👌

[@NikhilSingh-us5se]

ap bhaut acha pdha te ho jiska basic bhi clear nahi hai uska bhi dhyan rakhte ho really helpfull sir love from utta rakhand

[@inderacademy7101]

Hi Vinod your videos are very helpful for us Thanks for making videos for bigginers like me . Please make one series on react with redux

[@rakeshsahani3805]

Thapa dai ho k ..jasle garda ma fullstack developer ko journey maa ekdam help paye ...thanks a lot bro

[@MCFelony]

This also Works: import React,{useState} from "react"; function App(){ let val=""; const [state, setstate] = useState("") const chng=(event)=>{ val=event.target.value; }; const Fn=()=>{ setstate(val); } return ( Hello {state} Submit ); } export default App;

[@anti-tankartur677]

yea i did the same, diminishes extra lines of code

[@MeiLadkiHindustani]

your videos are beyond words super se bhi upper

[@todayrashifalinhindi586]

apse mene bhut kux sikha hai .. isliye tqq so much bro

[@suresh.suthar.24]

Sir jo aap word bolte ho na , boom 💥 guy's and this is it guys , sun ke mza aa jata ha 🥰🥰

[@nawarajjaishi4710]

Instead of creating a second Hook, we can use the First one to display Value after Hello. Like this: import React, { useState } from "react"; const App = () => { let [inputValue, setValue] = useState(" ") const inputEvent = (event) => { // console.log(event.target.value) inputValue = event.target.value } const Submit = () => { setValue(inputValue) } return ( Hello, {inputValue} Submit ); }; export default App;

[@nawarajjaishi4710]

By Doing like this We have any problems? Let me Know plz....

[@motivationforlife123]

@@nawarajjaishi4710 yes u don't get correct output. Did u execute in this way?

[@jade7945]

:) thnku sir for cracking jokes in between ,atleast we dont get bored of studying hahahah

[@noobCoder26]

u are great bhaiyaa .. u are doing a lot of work to spread ur knowledge free over the internet which the coding bootcamps charge thousands of rupees from us . love u ♥♥❤

[@imnemo2327]

If anyone having problem that react page loading becuz of form imported from bootstrap then just remove type submit from button and for from the first label nice and simple

[@luffydono0]

day 6 of react js starting here didnt able to complete 40 videos bcz of them mini projects in between. today i sat earlier for studying lets see how much i can do

[@SridharJammalamadaka]

Nice explanation... but needed an example of uncontrolled component

[@wasifirshad9818]

AND BOOM GUYS, HE IS A GENIUS

[@milindkhadse556]

Very useful information thank you

[@letsshowdesigns]

After this kindly make small website and elaborate the main concept of front end and back end use react as a front end and php as a back end.

[@noobCoder26]

u are doing an awsome job vaiyaa

[@grgsarun9798]

Congarts binod dai 150 k subscriber

[@prernasingh840]

Jitni bar apki video deekho add on hi hota hai knowledge me...

[@siddharthsingh4862]

Will you plz make 2-3 more videos on Events which are commanly use during webdesign

[@hariindora5491]

CORS (Cross-origin resource sharing) Bhai please 🙏 esko ek bar Hindi me explain KR do pure KZbin pr is topic pr Hindi me video nhi hi...... please 🙏

[@dreamerb1]

vinod bhai is the best❤❤

[@saurabrakshit405]

without using value attribute in the Input Box we are able get the required output .

[@musiclovers8488]

Boom ho Gaya!! Or Boom mujhe bhi samajh aa Gaya..

[@SunilKumar-gn4wb]

Thapa sir, please make video series of react js and backend php

[@aswath8265]

In this example is it possible we can do that without value field

[@ajayn1973]

1st like nd 1st comment jst Awesome

[@ThapaTechnical]

Congratz :)

[@rajbannasa7662]

crazy sir , thank you so much sir

[@anandagharami8957]

Sir, value ={name} is attributes ka important ka he??

[@Rohan_-kk1pu]

pta chale toh mujhe bhi btana bhai

[@Akshay-Malthane]

Im coming after Angular so i found that this is more complicated. In angular we use two way data binding and thats it

[@darshanadey4696]

Hi, please also make a video on class components

[@faizanmushtaq4667]

thapa this is the easy way to do this . import React from 'react'; const App = () => { let hello = "Hello" const inputValue = () =>{ let inputId = document.getElementById('inputId'); let heading = document.getElementById('heading'); heading.innerHTML = hello + " " + inputId.value; } return( {hello} Enter ); } export default App;

[@aPCreations191]

Boom GREAT TUTORIALS Boom

[@rajbannasa7662]

thank you so much sir

[@siddhesh3651]

Sir please build email verification using React 🙏

[@yogeshsarowgi7599]

Can you tell me the use of value because without using the "value" we can perform the same task.

[@nawarajjaishi4710]

Yes I do that task without using value see my code on above comment

[@imadityajain]

I just also want to ask that we can perform the task without using value then why should we use this?

[@kashmirtechtv2948]

@@imadityajain bhai ki videos is video k baad confusing hi hn.. Bhai professionaly bhi kaam ni krty..

[@mobpsycho6600]

If you got the reason behind using that 'value' attribute then you can tell us

[@digitaltanzeel1056]

and one more confusion if we use useref how can we show data on userinterface without using usestate ..then anyhow we use a usestate

[@omkargharat8391]

9:39 Which extension you are using so that you are getting such suggestions . Please anyone tell me how can I get this in my vscode

[@mallikasethi2604]

why do we necessarily need to give the value attribute?

[@surathjhakal9386]

even i'm confused with that why do we need value attribute and what is the use of it..

[@rishiraj2548]

Thanks

[@_code.hunter_]

Iss me input me value={name} likhne ki kya need he without value likhe bhi ho jayega na ye run properly

[@prajjwalkumar9568]

Bhaiya ek video banao unctrolled component k liye poora full detail me

[@dr.shreyas123]

Hi sir, please let me know which extension are you using for auto import modules?

[@khatariinsaan5284]

ES7+ React/Redux/React-Native snippets

[@thenameisdev7242]

3rd view love your work bhaiya

[@kushagragautam3979]

redux pe bhi banao

[@couldbenimish]

How to do it on a keypress of Enter key? What should be passed in onKeyPress event??

[@thecoderraj3777]

Thanks sir :)

[@vikrambam1184]

i did like this : import React, { useState } from 'react' import './Form.css' const Form = () => { let val = '' const [show , UpdShow] = useState(val); const showText = ()=>{ let newVal = document.querySelector('input').value; UpdShow(newVal); } return ( Hello ..! {show} Submit ) } export default Form

[@ermahesh2009]

Thanks bhai

[@Vi99770]

i liek that sentence the way you say 321 boom

[@sahildonde8729]

I am get a warning saying that - 'App component is not running in StrictMode'.. Can anyone help me out to solve this warning Also, when I open the React Builder Tool - Components, then my App component doesn't work but when I close the Components, then App component works.. Does anyone knows why it happens ?

[@adityarathi3420]

Thanks Sir :-)

[@rajibbaruaexp]

Thank you

[@cutebaby_shivanya]

Sir agar humne react mein ek nav bar bnai hai aur vhi navbar hmne reuse krni hai for sidebar bs ek do items ko add krke ya delete krke to use kaise reuse kr skte hai?

[@MyGeniusFacts]

Sie, formik and yup libraries par video

[@SagarMotorrad]

Can you please let me know why use twice usestate, 1. name, 2. fullName

[@VaibhavPatil-o1l]

onclick karte time , aapne setFullName(name); to my question is setFullName(fullName); kyu nai likh sakte?

[@Codewithminutecoder]

SetFullName("Jo value hume pass krni hai")---->kuch bhi pass kr skte hai name->ek variable hai jisme input me jo bhi value aayi wo name store kr rakhi hai

[@DEEPANSHU_NAG]

Awesome as always ✌🏻 Bhai kya aap mere se naraj ho kuch dino se comments ka reply nhi aaya ?

[@aravindgkp]

Plz make a video for attractive loginpage using bootstrap

[@sufisufyan6489]

zabardast

[@downloadshub1174]

Ye to bohat mushkil hota ja raha hai q k ye to Sirf form me ek hi chez pe kam Kiya input and button agar Pura form banayengy to pata nahi Kia Kia karengy

[@SidraJabeen-b5l]

I want to ask that in the console when we hit any letter just like I'm adding vinod on every letter it is showing in the next like vi vin vino vinod it is added in the next line like you have shown us I don't get how to resolve it . @Thapa Technical

[@shristi_Bharati]

Sir mera app.jsx kv kaam ni krta aisa q. Agr wahi same code kuch bhi name.jsx m rkhte to ho jata

[@sachinjha6333]

THAPA TECHNICAL CODE WITH HARRY AND CLEVER PROGRAMMER ALL ARE GEMS

[@kishandave722]

Awesome

[@atiqurrehman1951]

Sir Make series on Nodejs with reactjs

[@Magic_of_code]

sir i want data in second page so how can this be done

[@surajjadli1747]

why not use 62.5% in react css

[@onkarswami]

7:13 how many of you seen "Control uday control"😁😂

[@pavangowda1418]

I don't no reactjs versions concepts which is replaced can u create pdf

[@PRIYAKumari-zm1ql]

source code kaise milega ye sb

[@Vandanasharma-zj6up]

I wanted to ask why can't we use just one useSatate ? What is the need of two useState ?

[@Ashish123]

yes we can easily do it using only one useState

[@anuragmaurya6860]

page referesh hone pr 1 sec ke baad sb kuch waisa hi ho ja rha? Is there someone who can help me

[@nabiagahmedtariq5772]

'event' is deprecated.ts(6385) Give Solution

[@shivamkumar-ez9fl]

Bro whatsapp washing event ka scripts bnaya na pliz 🙋‍♂️🙋‍♂️👍👍👍👍👍

[@RohiTECH001]

♥♥

[@prakashrahangdale1563]

sir without giving the value attribute inside the input its work so why we define it?

[@sahilhans1867]

Value attribute in inputs is used in backend to do get or post request to insert data into database or whatever.

[@sunielsharma8142]

Dai daraj jasto Application kasari banaune tutorials liyera aaunush pls sir

[@20nupokhrel]

@Thapa_technical it didn't work for me can any one correct where am i wrong ?? import React, { useState } from 'react'; const App=()=>{ const[name,setName]=useState(""); const[fullName,setFullName]=useState(); const inEvent = (event)=>{ console.log(event.target.velue); setName(event.target.velue); }; const onSubmit=()=>{ setFullName(name); } return ( Hello {fullName} Click Me ); } export default App;

[@Vikashkumar-hm8vq]

bro ek weather App v banana na using react

[@karamveersachdeva935]

Aise nhi jaise vo likh rha h v i or server p ja rha hai .......that sounds funny😆

[@vaibhavjain4934]

Sir make a video on email template plzzz

[@ShafiUzzama-e2k]

kuch newproject lee k aaye react pe

[@arslanjappa4335]

bro plz redux k to apny btaya he nai

[@sandeeppal2045]

thapa sir how did you do your console dark

[@downloadshub1174]

It's already dark by default

[@sidtiwari9258]

Can you share console with final ouput bcz there is warning something "component is changing an uncontrolled "

[@sidtiwari9258]

plz can you help

[@sachinsubudhi6145]

@@sidtiwari9258 This is a warning. It is displaying becuase we are changing the event from uncontrolled to controlled. @Thapa Techinal is this expected?

[@debugwithshoaib]

Give some default value to your state. For example: const [name, setName] = useState("");

[@deepakrawat9758]

I didn't get this video, Many things in this you have not told us sir

[@ShafiUzzama-e2k]

react ka kuch video lee k aaye 3ya5hr latest

[@harshit3560]

Plz provide CSS file in your description : )

[@aarchivetales]

useState is not working

[@hmrahim357]

Hello Dear binod bro i want to learn haw to make a stopwatch by pure javascript....plz make a stopwatch for me

[@wrestlingmonster3638]

Mere channel par visit karke dekho

[@hmrahim357]

@@wrestlingmonster3638 vaiya visit tw kiya but stopwatch ki koyi video nehi mila.....agar hai tw ap mention karo na plz

[@youtubewallah543]

you know binod before matter start of binod :-)

[@good114]

💞♥♥💞

[@ravitokas84]

Something went wrong in this video it stop in last quarter of time

[@friendsfamily8039]

sir, please provide source code

[@ankurshukla2437]

We want MERN stack

[@kashmirtechtv2948]

Ni smj aya last s.. Dbara dekhna pry ga

[@kashifturk380]

bhai pese wapas karo ya source code do

[@AbdulManan-bk6hw]

heading change kro apni vedio ki