#29: React JS State Challenge: Master useState with Objects - Test Your Skills 🧑‍💻

Hello what's up guys, my name is Vinod Bahadur Thapa and today in this video we will see you react using state practice. Yes guys, today's video is very awesome because again today I have brought a practice in front of you where you will see this particular There is a problem, we have to solve it, it is basic, simple, I know you can do it, but still I want to make sure whether you have understood what I told you or not, okay so guys, first of all, till now you have watched the previous video. I highly recommend you to please check out especially my state variable basically react state management from yesterday's video where I cleared your doubt as to why whenever it is re-rendered its value does not change back to zero basically. If it doesn't reset then I told you that right, so today again I have brought a simple challenge for you guys where we have this array, we have an array, what do I have to do with it guys, I have to display it basically. On screen and we have already done if you remember when we but now we have a state and going ahead let me basically in tomorrow's video we will see what is this drive state and based on that data we have to change and up and down and do all that also So now you have this particular problem, first of all the age is normal, you have to run it where the name is Ella on Age whatever is 25 years old, this has to be shown and then the same problem has to be shown and you have to use the hook state of it. With help you have to show me basically how to use it then guys just pause this video and try it yourself and whatever code you have written let me know in the comment section alright guys so I hope you have tried it at least. First of all, let me tell you, this was an array, right end, I have to walk inside this method, here I do one thing, I come into the world of JavaScript, users data map method is not a simple one and here let's say we have this. Current element is my usual always and then we have this index right now what do I do here we need to return no matter what and here let's say we have this alive okay what do I need to do inside this alive again this Kali braces will have to be given so that whatever is my current element dot get my name dot get your age and here you can write years old ok it is so simple and obviously it will ask you brother why is this happening then you will get a You will have to work and that is, you should not need this now, so I am getting the error because of the key props, so let's go with the key and in that I pass the index. Don't worry, further I will tell you in detail. Why we need key props okay and whenever you use map method we need to have this key props no matter what this is then you have to understand okay so in this way I have written this, now if I have written this then this The drive state is already ready, I have kept it running on AP, so now if I go here, you can clearly see that in the user list, Ella Bob Charlie Angels, I got mine in this way, okay normal, let's do the first part, now this is it. Let me implement the same piece of code with the help of hooks basically with the help of state and that is your use state hook so guys now let's see how we can do this first of all we need to create a hook right first of all So you will have to create hooks custom users then convention set users will be equal to your use state and the moment I entered that at the top we imported it from our react library Now first of all give me the initial value of users should I give MT or this Earlier we had given zero in the count, I mean, what is to be given, it is also very important for you that what is the initial value to be given, it totally depends on what problem or what thing you are tackling, right for you. Meaning in our case if you see we have this user which is an array of an object which is an array but it is holding many multiple objects so even if the objects are very many but in reality then That is your array right now so our initial value must be an MT array, after that he can add whatever he wants on it but here I am not feeling the array from anywhere and this is an array of an object by default. We have already got it, so what will I do, earlier I had assigned it to a normal user variable, now I will copy it and instead of this, I will paste this in your initial value and when you do it in this way If any time, you are able to see the semi column here, you do not have to give it, remove it from Control A, now I have no need for it, I comment on it, it is fine in this way, so now you can see very clearly. That I have converted it into an end and use state as an initial value, I have assigned it to it, it is perfect, so now this piece of code that I wrote, it does not need to do anything, so you understand how any Now I can use the data of the normal variable with the help of use state hook, which was a normal variable, now I have assigned it here in this way, now there is no need to do anything here, nor is the user who was the first one. It was normal, now a state variable has been created and on the same state variable I have basically run my map method, so even if I go here, still I am going to get the same output so ya guys this is it That's all for this video today and I hope you liked this video to show you that now you can change any normal person into a state in this way and let me know in the comment section guys among you. How many had done both of these in a pinch? If you asked what would happen in a pinch then you should understand that guys you are learning because it was really basic but for an athlete to be able to do this much is a big thing even for a basic. Because till now we have learned only this much and especially for many people, how can I show this object, this was also important and the code to be written in this way was also important, okay so or this is it, today in this video. So guys, in tomorrow's video I will tell you what is drive state. So guys, if you like the video, please like it and share it with your friends. Please share this playlist as well. How are you feeling about the playlist? Let me know in the comment section if you want. so me b [music]