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

So till now we have made a beautiful application. I have done npm run, start run here. I know it will take some time. But it will not take your time, because with the help of editing I have taken you guys till here. I have fast forwarded everything, my npm run start is started. Now what I'll do ? We have seen what are props. Props are properties. We can pass components is properties. With help of that properties, components will render themselves. In this case, I have sent TextUtils and About. A

nd I have got them here, they are fitted here. If I want to reuse this component, I'll send something else at place of TextUtils and About from other website, and it will be render here. We have understood props. Now what we'll do is, we'll take this app further. And we'll make a new component. And what will be the name of the new component ? It's name will be, TextForm. You can make any name. Here I am writing its name as TextFrom.js I can also keep its name as Sannata.js I can name it as Shakt

iman or Hero Alom as well. But I wrote its name as TextForm, because it makes sense. As it is TextForm my form will come in this component. What I'll do is, I want function based component of react. So, I''ll write rfc here. And what am I going to do in this component is, I'll render a form. And from where I'll get that from ? I'll not write it, but I'll copy paste it from Bootstrap. I have included Bootstrap here, to do copy paste. I'll go to, Forms. I just want a text area, thats about it. I'l

l copy this whole thing quickly. And from this I'll use what is needed, and I'll remove which is not needed. I'll paste here. Yes there are some caveats. What are the caveats ? They are, class, class name. Firstly I have to close this single tag of input. Or else React will complain that this will not work. So I don't want that, React says to me like this. See here there are 2 things, one is input tag and along with it another thing is our text area. We only want text area, so what I'll do is I'

ll press Shift+Tab , and put it like this. And this is my for = Let me keep its name as text or my text or else I'll keep its name as mybox. As there will be only one box website, in which we will put text. And here I'll make its id as mybox. So here I have correctly render it, but it did'nt came here as I have just made the component and not used it. So I'll save this TextForm component, and here I'll copy it and I'll put it just after Navbar. So you'll see, like this I'll do it. And obviously,

I'll import it as well. It will not come without import. And what I'll import ? Import TextForm from components TextForm. And it must go here. See for example textarea, has came here. But this is looking something weird, what is happening ? I have to put it in a container, so I'll write div.container I'll put this TextForm in this. What will happen through container ? Container is a class of Bootstrap, which gives you this type of look. See this came in the middle. At the place of Example texta

rea, I'll not write that. I'll write, Enter your text here. Before that I'll put a heading here, that is h1. Or I'll do one thing, I'll pass heading as a prop. I'll write here, heading = And what heading I'll give ? I'll give heading as, Enter the text to analyze. Now here, how much this component will be used ? Right now don't think about that. You just think that we studied a concept of props and we are using it. Now what will TextForm get as a prop ? Let me write here, props. And here at the

place of, Example textarea infact above this, I'll put a heading and write, props.heading with the help of Java Script. And I'll close it. So whatever heading I pass from here, will be render there. I'll show you guys that, Enter the text to analyze has came here. Now if you want some space at up and down, than there is a class of my-3 along with container in Bootstrap. It gives 3 in margin y. As you can see here it gives some spacing above the container. After this, I want to put some buttons h

ere. And I want my text to change by clicking on that buttons. But if this textarea becomes large than it will be great. So what I'll do is, in my textarea, row is equal to 3. I'll not do rows=3 but I'll do rows=8 and I'll see what changes happens. So yes, its looking nice. Bigger text can be inputed here. Now here I can write a big story. And my text will be shown here. Now this Example textarea is not looking good. So what I'll do is, I'll remove Example textarea. I'll put some lable here. Let

me remove this whole part. I am not putting lable, I'll just keep the text area. Enter the text to analyze below. Here I'll write below as well. Now I want to make some buttons below. I want to make buttons along with this from. And by clicking on that buttons what should happen ? In this components I'll write some methods, fire some events that what should happen by clicking the buttons. So here with div I'll put the button. Infact, button.btn.btn-primary And I'll write here remove, let us say

I am not doing remove right now, lets do convert to upper case. So I have made a button which is useful to convert into upper case. Now I want that if I write anything in this and click on covert to upper case than it should be coverted to upper case, thats my target. And in the same way I want to make other buttons, and if I click on them my text must manipulate accordingly. If I want to convert it to lower case than it should be coverted. If I want to do something else, than that should happe

n. I hope till now you have understood. Now listen to me very carefully. Let me quickly open console here. Now see here it is saying that, we should use 'htmlFor' rather than using 'for' Thats why we should once see what console is saying. Let me reload this. Somewhere I have written class, but I have to write className. Let me correct and reload it and I hope my error will be gone. Somewhere else also I have done the same thing. I have written class, but I had to write className. This thing you

should keep in mind, that there should be no error. Now our console is correct. Now here I'll show you concept of state. Now what will happen is, there will be state of this component. This component which I have made here, the textform, so there will be a state of it. And what is the meaning of state ? Meaning of state is its situation. Which means, I can say like if this component is looking like this, than that is its state. If I have something in this, than that is its state. If heading is

written here than that is the state. The content written here, that I want to keep as variable. Listen to me very carefully, I want to keep as variable. And I want that as soon as the variable is updated it gets reflected wherever the variable is used. So I can make it as a part of state. Don't get confuse between props and state, both are different. You pass a prop. You make component and pass a prop. And that gets render in your component. But what is state ? It belongs to a component. For exa

mple, I'll make a state here and show you. I'll import useState from React. useState is a hook. Many of you will wonder that what is hook. We have never listen hook. I'll tell you what is hook. Firstly lets understand react hook. If I search react hook on internet, I'll come to this page. Hooks are a new addition in React 16.8. So previously, when you were writing a class based component than you were shown many functions. And there were many other things which you can do there. But why people l

iked this function based component, thats why React introduced Hooks. You can use, useState something like this. If I copy this and bring it here, so I am saying that count is variable. In my case it will be text. And I'll name its updated function as setText. I'll write useState('Enter text here') Now listen carefully, what I did. Firstly I imported useState hook from React. So this is understood to you. So what I am trying to say from this is, text is my text. Means, I want value in my text wh

ich is variable. I want Enter text here to come, its the default value. And whenever I'll update this text, I'll do it through this function. So this syntax, I don't want to use this word but keep in mind. And just understand from where I brought this, from here. So this syntax we'll use again and again, so just keep in mind. So just fit this in your mind. const [count, setCount] = useState 0 And you can make many such variables. Now whenever I'll use count and update it, it will be updated. Thi

s is the magic of React, obviously without reloading page. Keep listening and you'll get to know the story. As I have not finished it yet, about Hook and State. So what was happening when we were using class based components, there I can set my state directly with this.state But here how will I set a state as I am using a function. Hooks help in using features of class without making class. For now understand only this much about hooks. Now, what is useState ? If I use useState like this, means

I am using array destructuring. What will useState return to me ? It is text and setText. Basically I am saying that my text get set, array will return of its 1st parameter. And my setText get set in its 2nd parameter. Suppose I do console.log something like this And I'll write 2 here. I'll save it and show you. First thing which you have to keep in mind is, keep this in your function component. I'll not keep it outside, I'll keep it in function component. This is the 1st important thing. 2nd im

portant thing is, this useState('Enter text here') , I am using array destructuring. So I'll set both text and setText. Basically I am saying that, I want to use a variable naming as text. And whenever I want to update this text, I'll not update like this. This is not allowed in React, I can't update text like this. I can't update text like this, as I made text like this. And my text will be updated. No You cannot update state like a normal variable. You have to use function. Which function ? Up

dation function. Which you specify here. So when I have to change text I'll do setText and like this. So I did, setText('kdsfdsfdf') Now value of text is not Enter text here, it will be this. We'll understand this thing, and for that we should use it. Let's go and use state. So I said text, setText equal to this. Basically I said I have set a state variable naming text. And its default value is this. I am going to use it. So I'll do one thing, I'll write text after props.heading I'll do this muc

h only. props.heading - text Now see here what will happen. Enter text here, it came here. If I would have written Enter text here 2, than it will be the value. I would get to see here, Enter text here 2. Obviously, no surprises. But I want set the value of textarea here. I am not going to use it in heading, but I'll use it in value of textarea. I'll press ctrl+X , and do textarea value = I'll write value={text} , let me properly correct it. So the value of textarea will be the value of text. An

d what default value I have set for my text ? Enter text here2 So I set it like this, Enter text here2 came in this. Let me show you one another thing. If I try to change text. If I change it to new text, and save it. See what will happen, I'll get error. It will say you can't set state directly like this. You have to use this function. Which function ? setText. This is wrong. Wrong way to change the state. And what is the correct way ? Let me write here, Correct way to change the text. What is

correct way ? To use setText. So I'll say setText, and I'll put this inside it. So I'll do setText. new text. So this is the correct way. For now I'll comment out both and save it. And whenever we have to change this state, we'll use setText. Now here I can put more 3-4 state variable but for now I want only 1, which is text. Now I want, anyone to click on this button and when they click, my function should run. Let us say I want name that function as handleClick. handle upper case click, so han

dleUpClick I want this function to invoke whenever someone click on this button. And I have to make this function. So here I'll make a constant. handleUpClick = , and this will be arrow function. And I'll do console.log. So I made a function, Uppercase was clicked. What I told here is, whenever someone will click on this button than that function will be fired. Let me show you that first. Lets reload and inspect it. See here I have done some mistake. It says that, you provided a value prop to a

form field without an onChange handler. So this is telling me to set onChange. But why we have to do this that we'll see further, for now write onChange = , and write a method here. I'll write onChange = handleOnChange handleOnChange Obviously I'll copy this only. I'll not write logic right now, I'll write handleOnChange. And I'll write here OnChange. OnChange I'll write handleUpClick and handleUpChange, and error will go. Now it says setText is assigned but never used. I'll use setText now. I w

ant that whenever someone click here, firstly I want to show when I click covert to upper case. It will show me, upper case was clicked, without reloading the page. As I am clicking on convert to upper case this function has been fired. Now I want, when the function is fired I want to use setText here. You have clicked on handleUpClick. Now see what will happen here. As soon as I'll click here, I'll change my value of text, and why I'll change ? As whatever I'll put in setText it will set the va

lue of text as same. As I have made my state variable in such a way that whatever will come in setText it will change the value of text as same. This is the correct way to change the state. Let me show you here, when I click here see what happened here. You have clicked on handleUpClick. I'll keep clicking on it, as its state is changing here. You can see here its state is changing. Thats why it is been re-render here. As its a state variable. If you'll make a normal variable and put here, it wi

ll not be updated. By default, React does not watch every variable. But in this, the text variable has been updated. But why ? Because I have updated it with the help of setText. As it got updated, its value also got reflected here. As I'll keep it changing, it will get reflected. Let me show you this, as soon as I type something here. My onChange function is running, but I am not able to change. And whats the reason for it ? Its reason is, I have written here value = text Which means its value

will be text. And if I change something, this function will run. From here I want to tell you that, whenever you are listening something for any event in React, like we are listening for onChange event, at that time the function will run as when I will make some change. And I'll get a event object in free. I'll write event here, and in setText I'll do event.target.value This will look confusing to many of you. Why it will look confusing ? As they will think what is event.target.value And value i

s text. Let me show is what is happening here. And you'll use it many times, when you'll use inputs. When you'll use textareas, than also you'll use this syntax. Now let me show you, the textarea which I have entered here that has a value in it. And which is equal to text. As text a variable which belongs my state. It is a state variable. Here I can update it with the help of setText. I am saying that whenever user try to change textarea, than what should happen ? So the value which I have, supp

ose the user writes h At that moment the value will be, the text we had + h So I'll say, set my text equal to that value. What effect will come here by this ? I'll be able to type here, which was not happening previously. As I'll change something, the onChange function will run. Along with onChange function, we will set the new value equal to our text. So our text variable which is our state, will also be updated. So we learned about 2 concepts in this video. One is how to handle events, and whi

ch is very easy. And very straight forward. And by watching this video you know how to set state. How to make a variable, which React will watch automatically. Along with that you learned, how to listen to events. There are many events in Java Script, for every event you can make handler like this. But I showed you a bare minimum form. Now what we have to do is, as we will click to convert to upper case, I want that the setText becomes equal, but equal to whom ? It should be equal to existing va

lue text but in upper case. So if I write console.log and Upper case was clicked and after that I also write Text here, I will write + text here. What will happen as I'll click on this, just see I'll clear the console. See the value has came here. And if I change this value, like this my value came here. But I am able to access the text value from this function. Now I'll convert this into upper case. I'll write here, setText = , let newText = text.toUpperCase I'll use the toUpperCase function of

Java Script. And I'll do setText as new Text. So we made a useful application for our 1st React. I'll close the console. I'll reload it. You write any text here. Harry is a good by and than click on convert to upper case. Harry is a good boy is converted to upper case. How joyful is this. You were able to make an app which can be actually useful to someone. You have made an app that if anyone wants to capitalize one one letter of its sentence than they can do by using this application. Which co

ncepts we used ? We used state. We made a state, we said text will be our state. We used useState Hook. What useState Hook do ? It helps in making a state variable. In text and setText both, what we did ? We initialized them by useState Hook. setText is the value which here by default is Enter text here2. setText is the function which I can use to update text state. I can make many states but for now I have made only one. Further we'll make more, for now there is one which is named as text. This

text state which I have made, that I can use here anywhere, as I used in handleUpClick. Now in this textarea, I listened about 2 events. One is for onChange event, and it was important because I won't be able to type here if I won't have listen to it. It was important to listen for it, and set state in it. So that I can be able to type in that textarea. And thats why error was coming. If you remember there was an error like why you have not made onChange. onChange has to be made. As we are usin

g value equal to a state variable. And the state which we are using, should be updated as soon as someone types in textarea. So thats why we listened for onChange event. console.log is not necessary here, we don't want to spoil our console. To just understand this we kept things in console. I don't have to do onChange as well. In convert to upper case also which I am logging on console that is also not needed. Infact for you guys I'll comment out it. So here I'll save it, see my console is clean

now. If I write something here and do convert to upper case, there is no message in my console. So like this what you can do is, you can change text to upper from lower case without reloading page. I hope you understood this thing. In coming time we will listen to other events. We'll make our component complex with many states. And one other thing to tell, useState is not the only Hook. There are many Hooks in React which we'll see. You'll enjoy by using that Hooks, useState was just a trailer.

There are many other things in React which will, make your journey of making application in Java Script fun. Because if you use plain and simple, vanilla Java Script than you have to do many things like .inner html or add event listener. And many other things, from which you are saved now. And your app is also so organized. You are able to see in App.js that you have used Navbar. I have used a component Textform which I have given a heading. I hope you understood the concepts of React which I t

old you. Bookmark and save this playlist by clicking here. Very few people have saved this playlist till now. Save and bookmark it as I am going to upload everything here only. When you'll be accessing this playlist, till then many more videos will be uploded in this. If you'll open playlist now you'll see till 6-7 videos will be there. May be 100 vidoes can also be there when you see. Just see how many are uploded. And I am trying to make this course the best. If I have to be slow in this cours

e, I'll go slowly and upload videos slowly. But I'll make and give a perfect course. I hope everyone is enjoying this course. Thats it for now in this video. Thank you soo much guys for watching this video. And I'll see you next time.