1 00:00:00,180 --> 00:00:00,870 So that was fun. 2 00:00:01,080 --> 00:00:08,390 Now let's take a look at a more interesting example where our default value, our stock value will be 3 00:00:08,400 --> 00:00:08,870 all right. 4 00:00:09,510 --> 00:00:17,040 And essentially we'll be able to add the items, will be able to remove the items as well as clearly 5 00:00:17,040 --> 00:00:19,530 state value back to an empty area. 6 00:00:20,010 --> 00:00:26,880 And in order to see what we're going to create, I'm going to change, of course, my file. 7 00:00:27,210 --> 00:00:30,140 So I'll use a different path right now. 8 00:00:30,600 --> 00:00:32,730 I'll go for set up then. 9 00:00:32,730 --> 00:00:35,870 I'm looking for use state and then. 10 00:00:35,880 --> 00:00:36,240 All right. 11 00:00:36,630 --> 00:00:41,310 And what you should see in a browser is use state, Aurora, an example. 12 00:00:41,700 --> 00:00:44,460 Now, let's navigate there to that particular file. 13 00:00:44,730 --> 00:00:48,400 So what we're looking for is use state outrageous. 14 00:00:48,540 --> 00:00:51,090 And again, it is located in the. 15 00:00:52,500 --> 00:00:59,880 Now, in this case, though, I'll change this around, and instead of importing as a named export, 16 00:01:00,180 --> 00:01:06,710 I can show that we also have another option where, again, I would need to come up with those two values, 17 00:01:07,350 --> 00:01:09,090 however, I will call them. 18 00:01:09,330 --> 00:01:11,880 So in my case, it is going to be people. 19 00:01:12,130 --> 00:01:16,520 So that is going to be my right and then the function will be called set people. 20 00:01:16,740 --> 00:01:24,060 So these two things I need regardless, and that in order to invoke you state instead of importing, 21 00:01:24,330 --> 00:01:31,270 which is always an option, we can also do something like this where we go with react and then use and 22 00:01:31,620 --> 00:01:32,120 state. 23 00:01:32,130 --> 00:01:35,340 And like I said, this is where it would pass in the before trial. 24 00:01:35,580 --> 00:01:40,010 So, for example, as far as the weather, we could go with empty. 25 00:01:40,020 --> 00:01:40,360 All right. 26 00:01:41,130 --> 00:01:47,160 So these are two ways how we can set up either your airport or you go with the react dot and then you 27 00:01:47,160 --> 00:01:50,730 say, please keep in mind both of them do exactly the same thing. 28 00:01:50,970 --> 00:01:53,510 And that really depends on your preference. 29 00:01:53,820 --> 00:01:57,030 In my case, if I know that, I will use it just once. 30 00:01:57,390 --> 00:02:01,560 Most of the time I'm just lazy and I go with react and then use state power. 31 00:02:01,560 --> 00:02:08,820 If I know that I only walk it quite a few times in my component, then of course I just go with import 32 00:02:08,820 --> 00:02:14,380 and then use use state or whichever book name I pick online. 33 00:02:14,640 --> 00:02:16,470 That just saves me a little bit of typing. 34 00:02:16,590 --> 00:02:18,430 Again, that is up to you. 35 00:02:18,750 --> 00:02:25,890 So for the time being, we just have the empty array, which is somewhat OK, but we remember that we 36 00:02:25,890 --> 00:02:27,380 can pass whatever we would want. 37 00:02:27,810 --> 00:02:35,040 Now, if you'll take a look at the source folder, you'll find data just now in their address. 38 00:02:35,190 --> 00:02:38,310 We have an array and I name this data. 39 00:02:38,580 --> 00:02:42,720 And in here we have an array of objects where we have the idea. 40 00:02:42,840 --> 00:02:44,400 Remember, we needed to do that. 41 00:02:44,700 --> 00:02:51,240 If we're rendering the list, there had to be some kind of unique ID and then we just have the name 42 00:02:51,570 --> 00:02:52,470 and then value. 43 00:02:52,510 --> 00:02:54,950 So John, Peter, Susan and Anna. 44 00:02:55,230 --> 00:03:02,940 So what I would want to do right now in the USA Today, I already imported the data, so I noticed the 45 00:03:02,940 --> 00:03:03,330 path. 46 00:03:03,660 --> 00:03:10,820 I'm looking for data and then I need to go quite a few levels up and then look for that data. 47 00:03:11,250 --> 00:03:15,120 So I leave one folder, second and third, and then eventually I hit the source. 48 00:03:15,300 --> 00:03:18,000 And this is where I'm looking for the data. 49 00:03:18,090 --> 00:03:20,440 Again, this is going to be a relative path. 50 00:03:20,730 --> 00:03:27,480 So now what I would want is to pass in that data array as my default value. 51 00:03:27,900 --> 00:03:28,350 All right. 52 00:03:28,620 --> 00:03:29,080 Awesome. 53 00:03:29,340 --> 00:03:31,900 And then, of course, let's work on our return. 54 00:03:32,280 --> 00:03:36,180 Now, I could go with ReachOut, Fragment or a member. 55 00:03:36,180 --> 00:03:43,140 There is a shortcut where if I go with my angle brackets now, essentially I'm creating my fragment 56 00:03:43,410 --> 00:03:45,140 and I don't have that diffs. 57 00:03:45,720 --> 00:03:49,470 So now what I would want is to iterate over my area. 58 00:03:49,770 --> 00:03:51,030 So I go with people. 59 00:03:51,240 --> 00:03:53,550 Then again, we'll use the map method. 60 00:03:53,880 --> 00:03:59,100 And then for each and every person, I would want to return to something more meaningful. 61 00:03:59,640 --> 00:04:06,270 At first, I guess we can just return a hello and then we can just double check whether everything works, 62 00:04:06,690 --> 00:04:08,600 because of course, that is very, very important. 63 00:04:08,970 --> 00:04:14,490 If I don't have access to each and every person, essentially, if I don't have access to the object, 64 00:04:14,820 --> 00:04:16,650 well, kind of doesn't make sense. 65 00:04:16,650 --> 00:04:16,990 Correct. 66 00:04:17,280 --> 00:04:24,990 So if we cancel log beautifully, what I could say is John, Peter, Susan and I'm going to have four 67 00:04:24,990 --> 00:04:25,500 Hollow's. 68 00:04:25,830 --> 00:04:33,430 So now of course, let's do something a bit more meaningful where what I would want right now is to 69 00:04:33,480 --> 00:04:36,150 structure these two things, the idea. 70 00:04:36,630 --> 00:04:40,890 And then I'm also looking for a name now that is coming from the person. 71 00:04:41,160 --> 00:04:43,380 And then I would want to return a deer. 72 00:04:43,830 --> 00:04:51,630 Now, remember, when we render a list, we need to have this Kiprop and we need to pass in that unique 73 00:04:51,630 --> 00:04:52,180 value. 74 00:04:52,470 --> 00:04:56,510 Now, add a little bit of styling here where I'm going to say ihram. 75 00:04:56,760 --> 00:05:00,870 Again, that has nothing to do with functionality is just for the styling. 76 00:05:01,110 --> 00:05:07,920 And then let's set up a hearing for with a value of name just so we can see the name and then eventually 77 00:05:08,100 --> 00:05:09,710 we will set up our button. 78 00:05:10,140 --> 00:05:10,900 So awesome. 79 00:05:11,160 --> 00:05:14,400 Notice I have my list again. 80 00:05:14,760 --> 00:05:22,020 I used used state status, then I provided some default value, which in my case was done. 81 00:05:22,020 --> 00:05:22,340 All right. 82 00:05:22,830 --> 00:05:28,570 I could have added the empty array, but in my case I already prepared an array in there. 83 00:05:28,580 --> 00:05:31,730 Ajaz it is a array of objects. 84 00:05:32,110 --> 00:05:33,540 Then of course I invoked it. 85 00:05:34,370 --> 00:05:40,510 And then I'm getting to things, I'm getting whatever default value I have, so that is my state value 86 00:05:40,790 --> 00:05:44,100 and then I have the function that controls it. 87 00:05:44,840 --> 00:05:45,800 OK, good. 88 00:05:46,010 --> 00:05:52,760 And then, of course, just like with any other variable, I can just accept and iterating over like 89 00:05:52,760 --> 00:05:59,360 we have covered already before where we're iterating over and then we display for each and every item 90 00:05:59,630 --> 00:06:03,230 that's there and then we're just structuring idea. 91 00:06:03,440 --> 00:06:07,590 And but of course, now let's make it a bit more interesting. 92 00:06:08,030 --> 00:06:15,710 What if I would want to come up with a button that just delete all the items so right next to the people, 93 00:06:15,890 --> 00:06:17,660 I'll set up my button. 94 00:06:17,900 --> 00:06:22,980 I'll add here a class name of B10 and we'll set up our unclick. 95 00:06:23,360 --> 00:06:31,160 Now, if you want, you can set up here a function reference and this is something that we'll do later, 96 00:06:31,400 --> 00:06:34,180 once we would want to remove a specific item. 97 00:06:34,490 --> 00:06:37,150 But for now, I just want to showcase that. 98 00:06:37,160 --> 00:06:44,660 Of course, you can invoke this function directly in here where we're setting up the unclick. 99 00:06:45,350 --> 00:06:50,990 But the Gosia is going to be in this case, since we need to pass in the value, we'll have to set up 100 00:06:50,990 --> 00:06:52,350 a arole function as well. 101 00:06:52,370 --> 00:06:56,430 Remember, that was one of the cases that I showcased before. 102 00:06:56,960 --> 00:06:59,930 So in this case, let me write clear items. 103 00:07:00,140 --> 00:07:04,370 So that is the text in my button and let me showcase that. 104 00:07:04,700 --> 00:07:09,460 If we go set people, of course, we would need to pass in that new value. 105 00:07:09,650 --> 00:07:10,090 Correct. 106 00:07:10,580 --> 00:07:17,690 And if I want to set it up to an empty array, that just means that I will clear out all the items. 107 00:07:18,050 --> 00:07:25,220 Now, the problem is going to be that we right away invoke it, and that's not what we're looking for. 108 00:07:25,430 --> 00:07:30,350 So what we would want is only to invoke it once we click on it. 109 00:07:30,350 --> 00:07:34,890 And remember, the solution was to set up our arrow function first. 110 00:07:35,270 --> 00:07:38,440 So once we do that, then we'll have our button. 111 00:07:38,840 --> 00:07:40,670 And now what this button is doing. 112 00:07:41,000 --> 00:07:44,750 Well, it is calling a set people function. 113 00:07:44,960 --> 00:07:49,220 And remember, the only thing we need to do is to pass in that new value. 114 00:07:49,970 --> 00:07:51,440 So what is the new value in this case? 115 00:07:51,740 --> 00:07:59,190 Well, since I would want to clear all the items I just pass in the empty array, correct phonology. 116 00:07:59,480 --> 00:08:00,920 And of course, everything works. 117 00:08:01,160 --> 00:08:03,690 So now we remove all the items. 118 00:08:03,710 --> 00:08:10,190 Again, that is something you need to remember where, yes, you can call directly this function. 119 00:08:10,520 --> 00:08:17,930 You can set up a handler like we did previously and like we will do here where we would want to remove 120 00:08:17,930 --> 00:08:19,420 a single item. 121 00:08:19,430 --> 00:08:20,900 Yeah, that is definitely an option. 122 00:08:21,120 --> 00:08:23,330 We could have used the reference instead. 123 00:08:23,630 --> 00:08:29,630 But just keep in mind that, yes, you always can also use the inline function where you just need to 124 00:08:29,630 --> 00:08:35,260 set up a function and then call whatever function you have in the USA. 125 00:08:35,450 --> 00:08:38,140 That is always also your option. 126 00:08:38,480 --> 00:08:42,620 And now of course, let's work on removing that individual item. 127 00:08:43,070 --> 00:08:48,560 So in this case, I would want to first create a button, I guess, right next to the heading for let's 128 00:08:48,560 --> 00:08:51,200 go with button again will have on unclick. 129 00:08:51,530 --> 00:08:56,270 And in this case I will set up a function reference. 130 00:08:56,570 --> 00:09:05,300 So here, let's set up a curlier versus online will have again our function because we will invoke our 131 00:09:05,300 --> 00:09:05,780 friends here. 132 00:09:06,080 --> 00:09:15,320 So say remove item and now we want to pass in the idee and then I'll say remove, let's say that. 133 00:09:16,130 --> 00:09:21,410 And at the moment, it complains, well, you haven't created this remove item, so now of course, 134 00:09:21,410 --> 00:09:26,360 we need to work on our function where we say remove item and line. 135 00:09:26,360 --> 00:09:33,440 This remove item is going to be looking for the ID because, of course, for each and every item, I 136 00:09:33,440 --> 00:09:38,870 can grab that idea and then notice how we set up the arrow function and rewriter. 137 00:09:38,870 --> 00:09:42,620 We invoke the remove item with that specific idea. 138 00:09:43,070 --> 00:09:44,320 So essentially what happens? 139 00:09:44,630 --> 00:09:48,790 This doesn't run each and every time we run the wrap. 140 00:09:49,100 --> 00:09:51,850 In fact, it runs only when we click on a button. 141 00:09:51,860 --> 00:09:57,350 And this is going to be the first case that I talked about before when we talked about the events where 142 00:09:57,350 --> 00:09:59,210 you must have this our function. 143 00:09:59,480 --> 00:10:05,000 Each and every time you are invoking this function, you must have the R-AL function because you would 144 00:10:05,000 --> 00:10:08,890 want this to run only when you click on a button. 145 00:10:09,170 --> 00:10:15,440 And in this case, you have no other options since you are passing some kind of argument you are invoking. 146 00:10:15,440 --> 00:10:20,170 And so that's why you always need to return it from the Arrow function. 147 00:10:20,360 --> 00:10:25,880 So we have our remove item to remove item is always going to be looking for the idea and now let's set 148 00:10:25,880 --> 00:10:26,960 up the functionality. 149 00:10:27,320 --> 00:10:36,980 So in the remove item, what I would want is to filter out the array so all the items that don't have 150 00:10:36,980 --> 00:10:42,180 the matching ID, I would want to leave them in the tower, the one that has the matching. 151 00:10:42,680 --> 00:10:49,910 That one of course I would want to remove and now I can say set people and then set up the functionality 152 00:10:50,000 --> 00:10:53,930 right here in the parentheses what is always an option. 153 00:10:54,110 --> 00:11:00,290 But as far as the story goes on projects, I always like to be a bit more explicit where I'm going to 154 00:11:00,290 --> 00:11:02,130 create a new variable. 155 00:11:02,540 --> 00:11:10,930 So, for example, let new online people and that is going to be equal to my people state value. 156 00:11:11,270 --> 00:11:15,560 So my original van filter I'm filtering. 157 00:11:15,860 --> 00:11:21,200 And then for each and every person going to have, I would just want to remove the one that has the 158 00:11:21,200 --> 00:11:21,620 matching. 159 00:11:22,160 --> 00:11:26,540 So if I go here with person, I'd remember I'm filtering out the array. 160 00:11:26,540 --> 00:11:26,920 Correct. 161 00:11:27,290 --> 00:11:29,690 And then each and every object is there. 162 00:11:29,870 --> 00:11:35,990 And then I'm saying, hey, listen, if the person matches the idea that I'm passing in, then of course 163 00:11:35,990 --> 00:11:36,520 remove it. 164 00:11:36,530 --> 00:11:42,200 And the way I can do that, I can say exclamation point and then equals to an idea. 165 00:11:42,680 --> 00:11:50,120 So essentially the logic is following where we pass in the ID, then we filter out our array and all 166 00:11:50,120 --> 00:11:55,370 the items whose IDs are not matching to whatever we're passing in. 167 00:11:55,640 --> 00:11:58,160 Those ones are written in new people. 168 00:11:58,460 --> 00:12:00,170 Now, if you want, you can control it. 169 00:12:00,170 --> 00:12:04,160 But in my case, I'll pass in the the set people. 170 00:12:04,370 --> 00:12:05,520 So I have my function. 171 00:12:05,540 --> 00:12:08,270 Like I said, I can pass in whatever I want. 172 00:12:08,300 --> 00:12:16,070 So of course this is that new array that we're getting back and I'm just passing in into the set people. 173 00:12:16,280 --> 00:12:23,690 And what you'll notice right now that we have our buttons and the moment I click, I remove that specific 174 00:12:23,690 --> 00:12:27,760 item and I click on John, I remove John, Peter and Anna. 175 00:12:27,840 --> 00:12:31,780 And of course, once I refresh, I have all my items back. 176 00:12:31,790 --> 00:12:36,590 Now, if I want to remove all the list, because I can do it also as well. 177 00:12:36,840 --> 00:12:37,970 A few takeaways. 178 00:12:38,480 --> 00:12:45,110 We can set up this logic right here where we're passing in the new value because remember what filter? 179 00:12:45,290 --> 00:12:49,760 We are getting a new array anyway at the end of the day. 180 00:12:50,180 --> 00:12:56,900 So in my case, I just like to go a bit more explicit where I'm creating new variable and only then 181 00:12:57,110 --> 00:13:02,910 I pass it into the set people and the second one is going to be pretty common. 182 00:13:02,950 --> 00:13:03,420 Gotcha. 183 00:13:03,870 --> 00:13:12,080 Where since we have either function reference in here or we would want to invoke, of course, the function 184 00:13:12,080 --> 00:13:18,650 that we're getting back from the state, since in both cases we're passing in the argument. 185 00:13:18,830 --> 00:13:20,780 We're also invoking it. 186 00:13:21,200 --> 00:13:27,320 And that's why we always need to set up the Arrow function, otherwise it will run right away. 187 00:13:28,180 --> 00:13:35,230 So essentially when we ran the rap and that it will invoke it online, in that case, we are not running 188 00:13:35,230 --> 00:13:40,990 it when we're clicking on a function we are running at the moment, our app runs and that's not what 189 00:13:40,990 --> 00:13:41,640 we're looking for. 190 00:13:41,770 --> 00:13:47,050 But those would be the basics, how we can use you state hook with another.