1 00:00:00,330 --> 00:00:06,360 And once we have our structure in place now, of course, we can start setting up some functionality 2 00:00:06,780 --> 00:00:14,180 and first thing that I would want to do is the ability to add items to our list. 3 00:00:14,740 --> 00:00:21,570 Of course, we're going to do that in the most part, but we also need to understand that there's going 4 00:00:21,570 --> 00:00:23,230 to be some other cases as well. 5 00:00:23,640 --> 00:00:28,790 So first, I would also want to check if the value is empty. 6 00:00:29,310 --> 00:00:35,640 That is definitely something that I would want to do where if the users tried to submit the form with 7 00:00:35,640 --> 00:00:38,450 antivirus, then we have some kind of alert eventually. 8 00:00:38,910 --> 00:00:43,950 And then also if we are editing, so where we have the control log, I will remove it. 9 00:00:44,250 --> 00:00:52,530 And I'll start by saying that if a name is false, meaning if it is false, because we know that empty 10 00:00:52,530 --> 00:00:56,400 string of course, is a positive value, then I would want to display it here. 11 00:00:57,060 --> 00:00:59,520 Now, I don't want to work on the alert right now. 12 00:00:59,820 --> 00:01:03,450 That's why the comment, the spoiler alert. 13 00:01:03,690 --> 00:01:07,950 And then, like I said, I also would want to work on at it now to edit. 14 00:01:07,950 --> 00:01:13,860 It is going to be a little bit different where we're going to go, what else if and then I need to check 15 00:01:13,860 --> 00:01:16,510 that name is true. 16 00:01:17,100 --> 00:01:21,200 So essentially, if there are some values, then I would want it. 17 00:01:21,420 --> 00:01:25,280 And also if is editing is true. 18 00:01:25,710 --> 00:01:28,380 So we're going to go here with is editing. 19 00:01:28,560 --> 00:01:37,260 So if that is the case, then we'll deal, we deal with edit like so and then the last one is going 20 00:01:37,260 --> 00:01:40,410 to be the default one where we just add the item. 21 00:01:40,980 --> 00:01:43,170 Again, here's what we're doing over here. 22 00:01:44,390 --> 00:01:51,260 I'm checking if the value is empty, if the value is empty, then I display the alert and in here I 23 00:01:51,260 --> 00:01:58,430 check if there's something in the value and not only if there's something in a value, but if the editing 24 00:01:58,430 --> 00:01:59,000 is true. 25 00:01:59,270 --> 00:02:03,760 So if both of these conditions are met, then we're dealing with it in here. 26 00:02:03,770 --> 00:02:04,660 I'm just saying, you know what? 27 00:02:05,060 --> 00:02:09,320 If it is empty, then I will display the alert. 28 00:02:09,660 --> 00:02:12,720 And then lastly, I can also deal with else. 29 00:02:13,010 --> 00:02:16,250 So this is where I would want to add that item to the list. 30 00:02:16,460 --> 00:02:20,900 And again, I'll add some comments, because, of course, there's going to be more functionality. 31 00:02:21,200 --> 00:02:26,830 And I would want to start by show alert again, something that we're going to do a little bit later. 32 00:02:27,320 --> 00:02:30,420 And then, of course, I would want to create that new item. 33 00:02:30,950 --> 00:02:37,070 So in this case, I know that name has already some kind of value, because if it wouldn't, I would 34 00:02:37,070 --> 00:02:40,850 never get over here and then I would want to create that new item. 35 00:02:41,060 --> 00:02:45,290 So I'm going to go to new item is equal to the object. 36 00:02:45,290 --> 00:02:47,380 And then I remember we have a list. 37 00:02:47,390 --> 00:02:51,590 So, again, I would need to have those unique ID values correct. 38 00:02:51,890 --> 00:02:57,710 So, again, we're going to cheat a little bit where it's going to be ID new date, then we invoke it. 39 00:02:58,040 --> 00:03:00,260 Then we have to get time. 40 00:03:00,260 --> 00:03:08,290 We can invoke it and then we go to string just because I don't want to deploy some external library, 41 00:03:08,420 --> 00:03:09,770 OK, we're just going to cheat. 42 00:03:09,920 --> 00:03:12,350 But and we're going to go with title. 43 00:03:12,590 --> 00:03:17,330 So that is going to be the only property that I have on the subject, of course, apart from the array. 44 00:03:17,570 --> 00:03:23,120 And that will be equal to the name value that is coming from the state. 45 00:03:23,390 --> 00:03:28,640 And not once I have this new value, what I could do is go with a set list. 46 00:03:28,940 --> 00:03:33,590 So of course that is the function that controls my array and I can just say dot, dot, dot. 47 00:03:33,800 --> 00:03:41,750 So get me the previous values from the state list, value and line in here just at anyone one. 48 00:03:42,020 --> 00:03:51,580 So new items are here and I would want to finish it off by saying certain I'm equal to an empty string. 49 00:03:52,070 --> 00:03:58,520 So if we scroll down a bit now, I could iterate over the list. 50 00:03:58,520 --> 00:03:59,000 Correct. 51 00:03:59,330 --> 00:04:00,350 And you know what? 52 00:04:00,470 --> 00:04:03,380 Sorry, I'm actually going to be passing the items over here. 53 00:04:03,650 --> 00:04:04,610 So let's do it this way. 54 00:04:04,620 --> 00:04:09,510 I'm going to say items prop is equal to the list state value. 55 00:04:09,810 --> 00:04:16,580 Now, there's going to be a few more props, but by design, I would just want to set up in the list 56 00:04:16,850 --> 00:04:19,040 some kind of a return. 57 00:04:19,440 --> 00:04:22,340 So what I'm going to do is navigate through my list. 58 00:04:22,340 --> 00:04:26,300 I know that I passed and my items props all the structures right away. 59 00:04:26,600 --> 00:04:29,010 And no, I just passed in lineup's. 60 00:04:29,240 --> 00:04:32,780 That was equal to my list and not in the list. 61 00:04:32,780 --> 00:04:33,410 Jazz. 62 00:04:33,530 --> 00:04:39,730 I would want to iterate over the items and I'm going to do that in a def and I'm going to add last night 63 00:04:39,780 --> 00:04:50,330 of grocery and then West like so now we can remove the content that we had in the def and here let's 64 00:04:50,330 --> 00:04:53,060 just go with items and then map. 65 00:04:53,060 --> 00:04:54,140 So we're mapping over. 66 00:04:54,470 --> 00:05:01,280 I'll call my object item so each and every item will be represented by the name of item. 67 00:05:01,550 --> 00:05:04,690 And then I know that I have two things in that object. 68 00:05:04,700 --> 00:05:09,260 I have the three and I have the title and that is equal to the item. 69 00:05:09,590 --> 00:05:16,250 And once I have access to these two things, what I would want to return from my map while I'm going 70 00:05:16,250 --> 00:05:20,570 to go with article here, article here, online line for the article. 71 00:05:20,570 --> 00:05:23,330 That's Akie and I will be equal to my body. 72 00:05:23,600 --> 00:05:31,220 And also I would want to add a class name so we have the class name and that one is equal to a grocery 73 00:05:31,220 --> 00:05:34,130 item, grocery and then hyphen item. 74 00:05:34,490 --> 00:05:37,370 And then inside of this article, let's start with the title. 75 00:05:37,370 --> 00:05:40,310 So are a class name of title. 76 00:05:41,690 --> 00:05:47,540 And here, of course, we have the property, so we just set up the curly braces and we have the title 77 00:05:47,720 --> 00:05:49,520 now at the moment there's nothing there. 78 00:05:49,850 --> 00:05:52,010 That's why we cannot see anything. 79 00:05:52,130 --> 00:05:57,290 But I know that eventually, not only I'll have the title, but I'll also have my buttons. 80 00:05:57,650 --> 00:06:01,220 So we'll have a live here with B10 contain our class. 81 00:06:01,520 --> 00:06:10,000 And inside of this there, there's going to be two buttons, one for editing and then one for deleting. 82 00:06:10,280 --> 00:06:13,010 So for the time being we'll just have the type. 83 00:06:13,430 --> 00:06:23,750 And then of course it's going to be a button and also a class name of edit added hyphen Beaton and I'll 84 00:06:23,750 --> 00:06:31,970 just place my icon on that one is F.A.A. and then of course edit I'll save and what I would want is 85 00:06:31,970 --> 00:06:37,550 to copy and paste can it's still going to be button not a class name will be a bit different. 86 00:06:37,980 --> 00:06:43,940 So this one is going to be called delete button and then of course the icon will be a bit different 87 00:06:43,940 --> 00:06:44,460 as well. 88 00:06:44,840 --> 00:06:51,980 So now if we check it out once, will the item if everything is correct, then of course we'll display 89 00:06:51,980 --> 00:06:52,450 that item. 90 00:06:52,700 --> 00:06:54,110 So I'm going to go here with item. 91 00:06:54,110 --> 00:06:59,780 And there is now not only I can display the item, but I have my two buttons now. 92 00:06:59,780 --> 00:07:04,790 They don't do anything because we don't have the functionality, but at least the item is displayed. 93 00:07:05,150 --> 00:07:11,930 And I think once we have added this functionality, then we can definitely set up that conditional rendering 94 00:07:12,170 --> 00:07:21,380 in the app Jass, where I only would want to showcase my list as well as my button if there are some 95 00:07:21,380 --> 00:07:23,110 items in that dev. 96 00:07:23,390 --> 00:07:27,020 So what we can do is we can say list and length. 97 00:07:27,290 --> 00:07:35,560 So if the length is bigger than zero, only then please showcase that particular grocery container. 98 00:07:35,870 --> 00:07:41,570 So I'm going to go with Yuans, meaning I'm going to go with an operator and want to sell it. 99 00:07:41,870 --> 00:07:44,720 And as you can see at the moment, we don't see anything. 100 00:07:45,080 --> 00:07:52,880 Or when we add the first item and of course I can see my list as well as the clear button. 101 00:07:53,210 --> 00:08:00,980 Again, the biggest thing over here is right away setting up three conditions where first I'm checking 102 00:08:01,340 --> 00:08:06,800 if the value is empty, then I will display a lot, which is, by the way, something we're going to 103 00:08:06,800 --> 00:08:07,610 do in the next video. 104 00:08:08,000 --> 00:08:14,360 Then I'm checking if there's something in a name and also if I'm editing. 105 00:08:14,600 --> 00:08:16,910 And as I said, no, this is just double precaution. 106 00:08:17,090 --> 00:08:22,250 Technically, you could make an argument that if this one is false, well, I wouldn't get to this condition 107 00:08:22,250 --> 00:08:22,670 anyway. 108 00:08:22,790 --> 00:08:29,000 But just as a double precaution, I'm just saying, if name is there and if I'm editing, then I'm going 109 00:08:29,000 --> 00:08:30,830 to deal with added functionality. 110 00:08:31,010 --> 00:08:36,050 And lastly, if everything is correct and I have some kind of value in a name and I'm not editing, 111 00:08:36,440 --> 00:08:42,920 then I would want to create a new item with two properties idea and title and add it to my list. 112 00:08:43,040 --> 00:08:45,200 So I grabbed the old values from the list. 113 00:08:45,200 --> 00:08:48,790 So dot dot analyst and then I add that new item. 114 00:08:48,790 --> 00:08:54,650 I'm not I'm actually I just want to go Satnam equal to an empty string because of course the moment 115 00:08:54,650 --> 00:09:04,070 I add that item I would want to clear my input and then we just pass in that list as a prop into our 116 00:09:04,070 --> 00:09:04,790 list component. 117 00:09:04,790 --> 00:09:11,300 And I named this prop items and then of course, in the list component, I the structure them right. 118 00:09:11,300 --> 00:09:12,500 And a function parameters. 119 00:09:12,740 --> 00:09:19,970 I have my grocery list, I iterate over that list I the structure to properties idea entitle since those 120 00:09:19,970 --> 00:09:21,620 are two things that I have in my item. 121 00:09:21,950 --> 00:09:27,500 And then of course for every item I return my article inside of the article I have my title on, I have 122 00:09:27,500 --> 00:09:33,380 two buttons that at the moment don't do anything, but eventually one will edit and the second one will 123 00:09:33,470 --> 00:09:34,610 delete the item.