Understanding State & Handling Events in React | Complete React Course in Hindi #7

useState and State in React: In this react course, we will see how to learn react using projects.
This is going to be a project-based course full of real-world react projects. In this video, we will learn about state in react.
Make sure to access the playlist here (Important): • React Js Tutorials in ...
All the source code and other material will be uploaded on codewithharry.com as and when available!
►Checkout my English channel here: / programmingwithharry
►Click here to subscribe - / @codewithharry
Best Hindi Videos For Learning Programming:
►Learn Python In One Video - • Python Tutorial In Hin...
►Python Complete Course In Hindi - • Python Tutorials For A...
►C Language Complete Course In Hindi -
• C Language Tutorials I...
►JavaScript Complete Course In Hindi -
• JavaScript Tutorials I...
►Learn JavaScript in One Video - • JavaScript Tutorial
►Learn PHP In One Video - • Learn Php In One Video...
►Django Complete Course In Hindi -
• Python Django Tutorial...
►Machine Learning Using Python - • Machine Learning Tutor...
►Creating & Hosting A Website (Tech Blog) Using Python - • [Hindi] Web Developmen...
►Advanced Python Tutorials - • Intermediate/Advanced ...
►Object Oriented Programming In Python - • Object Oriented Progra...
►Python Data Science and Big Data Tutorials - • Python Data Science an...
Follow Me On Social Media
►Website (created using Flask) - www.codewithhar...
►Facebook - / codewithharry
►Instagram - / codewithharry
►Personal Facebook A/c - / geekyharis
Twitter - / haris_is_here
Comment "#HarryBhai" if you read this 😉😉

[@adwaitbokade2890]

harry your react series is more addictive than clash of clans

[@soumyadeepnandi8854]

Btw who plays coc nowadays??🙄

[@rohanrajput_9]

@@soumyadeepnandi8854 I was thinking the same

[@anweshansatapathy9718]

I envy you

[@krishnakolte9505]

Huh...😌

[@Earnmoneywithgaurav]

Samjh hi nhi aa rya

[@codewithswarnodip1811]

Two videos in a single day. Hats off to you.

[@NaryVip]

4

[@amitkapoor9692]

Ye video phle hi bna li hoti hai

[@awAmirWarsi]

@@amitkapoor9692 bhaot aasan hai aap ke liye aap ka bhi loi channel hai ya hawa me bate karte ho

[@amitkapoor9692]

@@awAmirWarsimere channel hone se kya hai jo bat thi vo bta di maine

[@12stdcommerce18]

Harry is not inspiration he is real hero in program ♥️

[@webdevelopment3508]

you do apperseation or evil bro

[@pysharora]

Literally took courses on udemy and other teaching platforms. the content which harry bhai provides is way too better to understand and grasp things to learn. would recommend this to literally everyone who wants to learn react.

[@tech_to_know]

100% right

[@sahilpatel0oo7]

👋 hello bro

[@reshmamandavkar5827]

This is best React series ever found on you tube. Thank you soo much Harry to make this easy for us. Keep up the Good work !!

[@bijayghosh6128]

Hello Harry Bhaiya. I am a slow learner, so have to watch your video atleast 5 times to understand the concepts in detail and also have to read the react documentation line by line. But at the end I must say, till lecture 7(my current watching) everything is crystal clear . thank you Bhaiya

[@ananyakashyap4759]

If you are taking time to learn React, probably you should first do the JavaScript course in this channel itself. That's what I did. So after completing JS, I resumed my learning of React now

[@jagankumarpatra]

@@ananyakashyap4759 its feeling very hard to understand

[@mansurishamim5666]

You are such a great human being sir. The best coding tutor for me is you Harry Sir. Hats off to your work and dedication.

[@politicswithrajariaz7791]

Harry brother, you are doing a great job, I have seen this kind of effort to make people understand. I visited multiple platforms to learn react but believe me that was just a waste of time for me. It is for the first time that my all concepts for props and state are cleared! Love from Pakistan!!!!!!

[@PiyushKumar-nf4lf]

I just watched last class second time to revise and now after one reload i got this video Thank you so much harry bhai and please give me a heart i never got a heart from you❤❤😢😢

[@PiyushKumar-nf4lf]

Thanks sir i am your most biggest subscriber and first time got a heart from you cann't believe thank you sir

[@carotshorts6467]

myc

[@nottttyyyyyy]

4:56 sir apne jsx wali video mai bola tha ke ham 'for' ka use nhi kar skte iski jagah 'htmlFor' ka use hoga but compiled aur render without kisi error ke ho gya aap explain kar sakte hai iss cheez ko and thnx sir this one of the best react course ❤❤ 4:56

[@adarshanand2073]

I really find the way you explained the concept in such an easy and efficient way. Most of the tutorials uses big and advance words to show off but this one hit different. Thanks for the concept man 🔥

[@EngrZardariSaddamHussain]

This is the second thing I am learning from you, You are an amazing Teacher!

[@Aditya-cx3oe]

Key Takeaways for quick navigation: 12:20 🔄 Handling State in React: - State in React is managed using the `useState` hook. - State variables are declared using array destructuring, e.g., `const [text, setText] = useState('Enter text here')`. - Updating state should be done using the provided updater function (e.g., `setText(newText)`), not directly. 14:13 🖱 Handling Events in React: - Events like `onClick` and `onChange` are handled using functions in React. - Event handling functions, like `handleUpClick`, can be defined to execute actions on events. 19:24 🔄 Updating State Based on User Input: - State variables can be updated based on user input, such as changing a text value in a text area. - Use the `onChange` event to track changes in input and update the state accordingly. 20:48 ⬆ Updating State with Derived Values: - State can be updated with values derived from existing state, like converting text to uppercase before setting it. - Example: `setText(newText.toUpperCase())`. 23:39 🎣 Introduction to React Hooks: - `useState` is just one of the many React Hooks available. - React Hooks provide additional functionalities, making the development of applications in React more efficient and organized.

[@EDGERUNNER_101]

This comment must be pinned.

[@prashantbabu5697]

bhagwan ka aadmi 🙏

[@abdulrehmaan153]

Waah yaar! Nahi append krna pada, nahi document select, programmer keliye bhi easy to make and application kitni hi zyada light weight aur as fast as FLASH jaise banegi... 🖤🖤🖤 I was a big fan of harry n now of react.js too 🔥🔥🔥

[@iambiggestfanofavneetkaur2661]

thank you so much harry bhai

[@kamendragupta9122]

East or west harry bhai is the best from todays morning i am trying to understand react from others but i am unable to understand a single concept correctly but now after watching this react playlist i got everything in my mind 👍

[@FutureeeBillionaireee]

What i also learned today from this video are as written below: 1. State=condition of any component for eg. textarea component might be empty sometime , sometimes it has letters . 2. Hooks= A method which helps us to use features of classes in function based component this is because developer like us prefer to use function over classes. 3. Hooks has this part ----> const [count,setCount)=useState("Hello Universe"); Here in above hook the value of count is Hello Universe . count is array variable so that we just can't update or change its value like normal variable. But we can update or change its value using setCount() method. i.e. setCount("Hey You"); this implies the value of count is updated to Hey You. What is inside this mini project and what i do? ---> Project provides mini textarea and 2/3 buttons like UpperCase, LowerCase, No. of letters. we change the text value according to the buttons instruction using state and event. Its more simple as we use onClick={ClickFunction) and we define its functionality as well. Note : Advantages of hooks and this stuff , whenever you click Uppercase button page does not reload. Which enhances its capability. IMP*

[@NathaShiv]

Thanks:)

[@cs_111_amansingh6]

Hii bro you have notes??

[@sahilpatel0oo7]

Hello

[@cs_111_amansingh6]

@@sahilpatel0oo7 notes h bhai ?

[@drixx163]

@@cs_111_amansingh6 refer w3 schools + documentation wahi enough hai ig baaki khud ke hi banalo

[@harishshete6917]

I am loving this course, Thanks a loooooot for mmaking this course. This a gift for the self learners like me 😍😍

[@vaibhavbisht9649]

whenever i click on my "convert on uppercase button" the text in the text area converts to upper case, but the page automatically reloads and could not hold output, how can I fix it.

[@iambrijeshtoo]

Is that any warning in the console or terminal it is showing?

[@Palestinepakistan786]

use preventaaaadefault(); in function that hold the page to reload

[@aliyankhan2806]

@@iambrijeshtoo no

[@mudassargujjar6442]

@CodeWithHarry bohat maza aa ryaaa boss

[@learningfuture7957]

I watched the react in 1 video but I didn't get much but it gave me a good purpose to start exploring more creativity by Harry, and now I'm watching this playlist. one word superb. although one word is not much for you. love from Pakistan.❤️

[@imnemo2327]

Aur bhai kaha pohonche

[@learningfuture7957]

@@imnemo2327 abhi university ka kaam kr rha hon isay pause kya hao ha. agr ap ka ps time ha isay follow krtay rho INSHA ALLAH beneficial ho ga bohut.

[@imnemo2327]

@@learningfuture7957 ma wese inko nahi thapa technical playlist follow kr rha wo mast ha aur ap bhi check kro is playlist sa behtar i think

[@learningfuture7957]

@@imnemo2327 ok thank you. I'll surly check it

[@_.Mustafa._]

@@imnemo2327 Yeah, I just watched the Thapa video on useState, he explained way better than Harry.

[@DattPanchal]

Thank you Harry bhai.. Aapki vajah se me bohot kuch sikha hu ❤️❤️❤️

[@mdanas7189]

in place of "value ",we can use "placeholder " so that we don't have to create "onChange "function

[@dhruviraj4883]

THX BRO IT WAS A NICE SOLUTION

[@srupoemwriting8287]

Thank you so much sir . I have a request sir can u please make a Angular playlist basics concept like this sir?

[@pradipbhume6098]

Hi Harry, This is really appreciable that you have put lots of efforts to create this course. I have been watching all videos thoroughly. I observed small thing that I thought I should correct at 13.15 you tried to change state directly which threw an error because we have used (const) for useState De-structuring. If you use (let) instead and try, you would be able to change state directly. (Though this is not correct way to update the state as you mentioned in video after that). Keep Going and Growing. 🙂

[@riteshtendolkar1219]

in current version event.target is undefined instead of that Event.AT_TARGET is used

[@mr.anonymous1994]

Bhai jaldese like karo 😍😀😀😀

[@mukulbansal8269]

this react tutorial is the best in this world.

[@softboxmelody]

I followed every steps and when I am clicking btn convert to uppercase it shows the value only for a second and site automatically reloads and text disappear

[@prisinha]

event preventDefault

[@nimishajain3722]

Thanks harry for uploading another video...🙏🙏❤❤❤

[@dhruvluvani]

6:47 state meaning starts from here thanks me later

[@shi-nee7966]

For the algorithem. Altho i bought a course on udemy before this course started but i know harry bhai's the best. So im liking and commenting on every video for the algo.

[@amanr007]

The best Course hai yeeeeeeeeeee i loved it. till now i understand each and everything.

[@rohn3711]

Perfect explanation... Crystal clear 👍

[@sachindrapandey7146]

Highly recomended for begineers who just started react,,very clear & crisp

[@dharmikjain5288]

Ade chize to work ni kari🥲

[@sachindrapandey7146]

@@dharmikjain5288 nahi bhai..mai video 15 par hu..abhi to koi dikkat nahi aayi

[@souvikmukherjee2349]

I can't thank you enough Bhaiya... literally any word is insufficient to explain your efforts

[@itsmytechnology9285]

First 🔥

[@highverse776]

Harry bhai ek no course h

[@CodeWithHarry]

Maza aa raha hai na? Hope you understood state in react For optimal learning, make sure to access, save and bookmark this playlist now: kzbin.info/aero/PLu0W_9lII9agx66oZnT6IyhcMIbUMNMdt

[@Devaitechs]

Heart plz

[@Devaitechs]

First comment

[@wafttv]

Thanks, bhai. ❤️

[@musabsayyed8609]

The WebDeveloper Shorts : please checkout this channel

[@antoniokhan9367]

Dil dedo bhai

[@MuhammadUsman-2001]

First time in life coding ka Maza aaraha ha amazing teaching ❤

[@rushikeshbhujbal2480]

YOU ARE AMAZINGG HARRY BHAI LOVE FROM ANTARTICA

[@kahanijag970]

Harry bhai ye beech beech m models/actors ke video kaha se daalte hai website ka naam batao please koi

[@wisdomkhan]

Bohot maza aa rha hai bhai. You are explaining things so subtly. You are awesome bhai.

[@shahzadshahzad475]

well done Harry sir,,,,,i am from pakistan ,,,,,Bhai ma ap ki saari video dekhta hu ,,,ma na ap sa bohat kuch seekha hai ,,,,Allah ap ko khush rakha , and ap aur success achieve kra

[@jaankajhotta]

Well done harry bhai mja aa gya aap se sekh ker

[@rahulgupta373]

I didn't got what is useState and how does it actually works, I guess you should make another video to make it clear; anyway i am loving this playlist, and definately learning alot thanks for making such a great study material, for free of cost ☺ ☺

[@wasiquekhan4513]

Thanks bhai bohot pyar se sikhate hai aap aur look bhi smart hai ap ka and style and voice also

[@rajgautam5122]

This guy is awesome. He is a beast.

[@jayandhami7344]

This react course is very useful, love form Nepal harry bhai ❤

[@Meshv_patel]

Are harry bhai today is there two videos by you omgggg good very good

[@pranto.cse25]

You Are Boss Bro. Love From Bangladesh ....❤❤❤

[@programmingwithraahim]

Harry bhai maine app k batai bina uppercase wale function ko complete kia!!

[@ibrahimamjad1102]

very good harry bohat achi samajh arai ah

[@aqibahmad1536]

harry bhai you are great teacher

[@yashbutla2094]

Very Helpful and great content

[@sherhanan1219]

Sir bhat he zabardast explanation ti bus event wala step nhi samj aya

[@nagendrababu6316]

Thank you Harry, today I added two more Lowercase & Titlecase buttons using StackOverFlow and your class.

[@zohaibahmed523]

Harry bhai ap pro ho hum nh sab sir k upr say ja rha hai plzz aram say or achay say explain krdein , reactjs bilkul new hai mare liye

[@priyanshagarwal2095]

9:56 sharyi sunte raho kahani , apko samajh m ayegi baat, kyunki mene abhi khatam nhi kara hai, hooks kai bare m batana or state k bare m batana aaj ,,,,,,,,,,,,,,,,,, wah wah wahhhhhh

[@Sachin_Ravi]

maine 3 bar hooks pada hu lekin 4 time me samja vo bhi haary bhai ke video me nicee

[@samuelfrank1369]

Thanks Harry

[@ruchinfulani2149]

fantastic video Harybhai because I have seen many videos related to state but I can't understand easily. After watching your video I understand usestate actual meaning.

[@yugal3556]

I believe in you harry, and lakhs of us believe in you , you keep making videos , we keep learning from you and keep supporting you , thanks for awesome playlist

[@ADITYAMISHRA-kx4dy]

Love you Harry bhai bht aasan tarike se btaya ha aapne, mja aa gya❤❤

[@inventionforsolutionifs5643]

BHut Shi or Sandar couse hai bhaiya Thank you so much.😍😉😊 ❤🥰🥰

[@sawanmishra9117]

harry bhai bahut mst padhatey ho yaar aap dil se thank u bhai

[@buisny]

Legend 17yo me doing this in browser ide of window 7 Window 10 ka paisa nhi hai lekin jajba toh hai harry bhaiya react node window 7 me bhi work kar sakta hai mai browser me ide chala ke apke videos se code karta hoo thanku bhaiya ji

[@rajbongshi2002]

13:30 error ka reason alag hi hai....simple...kyunki const variable pe value reassign nahin kiya ja sakta....wo baat nahin hai.... agar variable ko "let" ke saath declare kiya jaye toh ye work karega...koyi error nahin aayega.

[@ejazalikhan9324]

Harry Bhai you are the best

[@generalgaming2237]

bhai dil se thanks hai apko aur apki itni mehnat ka

[@potlurisairaj6669]

whenever I try to click the button to change everything to uppercase its not showing the answer its coming for a second and it goes

[@aliyankhan2806]

This because most of using textarea in form tag so when ever we push it is submited. So remove form tag then try it again.

[@ashikmehermobin9926]

The most easiest explanation of useState

[@ApnaCoderAkash]

harry bhaiya es course me maza to a raha h

[@manthanramteke6101]

Thanks Harry bhai ❤️❤️❤️ you are God of Coding in the World 🌎🌎🌎🌍👍👍👍👍

[@tejaskumar4470]

HARRY BHAI 2 VIDEOS WOW!!!!! 🔥😊

[@PradeepKumar-nw4ku]

harry bhai aap se ek request h ki aap ek aisa jugad bnao na jisse hmm student aap se apne future ke bare me kuch bat kr ske. like coffee with Harry. like counselling type and offcorse it will be paid.

[@abdulrehmankhan8158]

Lot of Respect and love from Pakistan💚

[@easylearning6647]

Thank you harry bhai maza aa gya

[@Aayush-cd3dc]

Are waah sir ap humare liye kitni mehnet krte ho thankss

[@bodhisattabhattacharjee3338]

My page was getting refreshed on clicking the button. After looking it up on the internet I found the fix! ------------------------------------------------------- const handleUpClick = (event)=>{ console.log("'Convert to Uppercase button' was clicked!"); let newText = text.toUpperCase(); event.preventDefault(); // prevent page refresh setText(newText); } ------------------------------------------------------- After this it is working as it should be

[@harshal5833]

Thanks a lot bro

[@kushagradubey6395]

This React course is very very helpful.

[@masoodgazi318]

Awesome Ali bhai its amazing..

[@gopal12455]

this is very useful tutorial 🔊

[@NextGenCoding545]

AAP legend ho

[@adarshp82]

@CodeWithHarry bhai useImperatveHandle hook ke bare me bhi video banaye aapke video very helpful hote hai

[@Pritamdaspk]

Harry bhai ne poori react shoot kar li ha kya aaj ek pe ek video wow Harry bhai please data structure ka playlist bhi khatam kar do

[@alihasnain7739]

Sir sir sir sir you are amazing wonderful charming kindful helpful humble inshort you are everything ......

[@filmidunia7787]

maza aagaya sir, aapne last video me kaha tha , tum log so rahe hoge to nahi aayega, aapke videos me neend ni aati

[@homennath7535]

React ne Majja aa rha he pura , Thank you

[@evilgaming4209]

i love u sir ji mja aagya react padkeeeeee

[@getknowledgebite3413]

sir ----->text Item Store the current value which is passes by useState and setText is the second Item/Fuction which is used for the update value of current value in case if we want to update the current value ....we have choice to use either one item or both and useState/hooks line always mentioned inside the top of function

[@DineshSharma-pp3ox]

This video is very very helpful ♥️

[@rkvideos3585]

Harry bhai next level

[@abhinavshukla5628]

maza aa riya hai......dil garden garden ho riya hai :)

[@harshpagada8504]

Harry I see your react video wow, your course is a amazing.

[@Lovii_shorts]

very use full video this course is perfect for beginners in react 😍

[@hamdanshaikh1936]

Thanks bhai jaldi jaldi video upload karne ke liye

[@shivanisingh-mc1xr]

I saw multiple tutorial on react, but really couldnt understand anything. But Thanks to you Harry for making things so simple. Heartful thank you for this.

[@ranaimranahmed2532]

kamal ki videos hn apki

[@mrprogrammer1891]

guruji tusi great hoooo