‫Remember how I said earlier how rendering lists is one
‫of the most common tasks in React development?
‫Well, this application is no exception.
‫And so let's now render the list of pecking items.
‫And first of all, let's go to our CSS file
‫because that's again where I pasted
‫this array of initial items.
‫So let's grab that.
‫We can also close index.js
‫and I will paste it here at the very top.
‫So you see that we have once again
‫an array with a few objects, and in this case
‫each object describes one item to be packed.
‫So each of them has an ID, a description, quantity,
‫NT OD packed property
‫which tells us whether this one has been packed or not.
‫So based on this
‫we will then display the item a little bit differently.
‫So here, well here we don't have any.
‫So here in the demo app.
‫So you see right now it's not packed, but if it is packed
‫then you see it is like strike through.
‫Now okay, so let's now take these items here and
‫render them as a list into our UI.
‫So as the name says
‫we're going to do that in the packing list.
‫So first of all, let's again use semantic HTML
‫and convert this diff into a UL.
‫So into a unordered list.
‫All right?
‫And then immediately here we enter JavaScript mode
‫because remember how we render lists in React?
‫Well, we simply use the map method that we already know
‫on the array.
‫So initial items, and later on we will, of course
‫then when we make this dynamic, use another array here.
‫But again, for now here, we just want to render something
‫so just to make this work.
‫Okay?
‫Then inside the map method
‫each of the elements will be, let's say an item.
‫All right? And then for each item
‫what we want to render is an item component.
‫So let's immediately write that here
‫and we will then create the item component in a minute.
‫So item, and then we passed in as a prop, the entire item.
‫So item and then item again, let's close this here.
‫So you see we have a lot of items here.
‫So the name of the component, the name of the prop,
‫and then here the object itself
‫which, remember, is the argument
‫of this callback function in each iteration over this array.
‫So nothing new here at this point, I hope.
‫So, a gift is a safe, but of course item is not defined.
‫So let's quickly take care of that.
‫And now here we need to accept the props, right?
‫So we can do it like this, remember, but even better
‫we can immediately destructure this
‫and then give it the name here
‫of the prop that we passed in, which is item.
‫And again, it could be anything.
‫It could be object like O, B, G, or X or anything.
‫But yeah, it's easier to just call it item here
‫because that's what it is.
‫It's just a packing item, so to say.
‫So here, this item should be now an LI element.
‫So a list item, because that's usually what direct children
‫of the UI or of the UL element should be.
‫And then just to start, just to see if it's working
‫let's simply render, I think it's called description.
‫Yes, that's it.
‫We'll just copy that actually.
‫So item dot description, give it a safe.
‫And there it is.
‫So we have passports and socks.
‫Now the styling here is a little bit off.
‫And the reason for that is
‫that here I actually did a mistake in the HTML.
‫So here let's actually create a diff, and then
‫it's this diff that is supposed to have the list class.
‫All right?
‫And the reason for that is that later on
‫we will have another element in here for these filters.
‫So we will have a diff for these two things down here.
‫All right.
‫So of course for me, that's easy to see now
‫because I already built the app beforehand.
‫But once you start building your apps on your own
‫there will be a lot more back and forth
‫which of course I cannot do here in this course
‫because then it will take just forever.
‫Okay, but anyway, let's now add some more here.
‫So we don't just want a description
‫we also want this icon here for the leading.
‫And later we will want this checkbox
‫but let's leave that for later actually.
‫So here, let's create a spin element.
‫So for the text, let's grab that, paste that here.
‫And then we also want the item dot.
‫Let's see, it's the item dot quantity exactly.
‫So item dot quantity.
‫And notice how sometimes prettier creates like
‫these empty strings here in our JSX
‫so many times this is not necessary.
‫So just get rid of that.
‫And now finally, we need delete button.
‫And for now, we won't attach any event handler here
‫but we will just place an icon here in the form of an emoji.
‫So maybe like that.
‫So this X right here.
‫And again, if you can't make this work
‫then you can just write the X like this or also like this.
‫So that would work as well.
‫Alright, so this has now been rendered here based
‫off this list.
‫And if we duplicate this and add something else here
‫like a charger, one charger, then there it is.
‫Now to finish, let's just mark one of them as packed.
‫Make this one true
‫so that we can add some additional styling here.
‫So we want to basically have some strike through there.
‫So that's simple stuff.
‫So let's come here to the item.
‫And here we will now conditionally add some styling.
‫So instead of conditionally adding a class here
‫I want to conditionally simply add some style.
‫So let's write style
‫and then it immediately enters JavaScript mode.
‫But now I will not immediately write the object
‫of CSS properties.
‫Instead, let's actually use the ary operator to
‫decide which object the style should actually receive.
‫So if item is packed, and here we don't really
‫need a condition because this is already a bullion.
‫So if it is packed
‫then we want an object which will contain some CSS
‫for the strike through, but if not,
‫so if the item is not packed,
‫then we will want to return this empty object.
‫And so then no styles are going to be applied.
‫So the CSS property that we're looking for
‫is called text decoration
‫and let's set it to line through like this.
‫And that worked quite nice.
‫All right, so let's try another one just for fun.
‫And yeah, immediately you see
‫that it gets strike through as well.
‫So this was yet another way
‫of using the turnaround operator to conditionally
‫set some style here.
‫So you see that we have a lot of freedom in React,
‫and again we simply use the JavaScript tools
‫that we already have for this kind of stuff.