Hi and welcome back.
Today we're going to be working
on selecting a category and showing the list on this page here.
So first things first,
we are going to create a view container for our donation items.
And what I want to do is I'm just going to quickly collapse these items so
that you're clearly able to see what I'm working on.
So let's create a view container and give it a style.
And this style is going to be donation items container.
And let's create that style over here and let's see what we need for that.
So I'm going to go to our donation mobile
app and we need a margin top and we're going to need a horizontal margin of 24.
So let's do that.
Let's give it margin top of vertical scale
20 and let's give it margin horizontal of horizontal scale 24.
And I missed the opening brace here. Great.
So now that should be applied here.
And now what we want to do is put these items inside here.
And to do that, we are going to use a mapping function.
So let's create something like this.
First of all, let's say if there are nothing inside our donation items that we
created here and we set it, then don't show it.
So only show it if the donation
items length is greater than zero.
Otherwise we don't want to see it.
And then we're going to say
map over these values
and create a single donation
item component for each one of those.
And let's give it some kind of key
so that they're uniquely identified.
And for that, we're going to be using
value donation item ID
that is going to be passed through here because every donation that we
created, every donation item has its own donation item ID.
So we're going to use it here.
Then I will definitely need to import this component here.
So let me do that.
Let's import single donation item and then
the single donation item will definitely need some props.
So let's set up those props here.
Now I'm getting some error because I need donation items inside and then I'm getting
some bunch of other errors that are going to be resolved very soon.
First of all, I do need a price.
And the price of each donation item is presented as a string here.
So we're going to have to make sure that they are converted to numbers
and to not lose anything that comes after point here.
We're going to have to use the floats.
So I'm going to say parse float and use value price for this.
I'm also going to need batch title and bash title is going to be a little
complicated because all we know is what category have we selected.
So we're going to have to find
the category name from here for the selected category ID.
So since we know what category we have selected, what we're going to have to do
here is do categories, categories and then filter and only get the value
that actually I can't use this value here because I already used it here.
So I'm just going to call it Val instead.
So only get the value
for which the category ID is equal to categories selected category ID.
So filtering functions will give us back an array.
So it only will contain one element I'm sure.
And from that element we want to grab the category name.
So let's save this.
And then we also need the donation title.
And donation title is going to be value name which we have set up here.
We need the Uri attribute for the image.
So that is going to be value image.
Save this.
Let's reload our application.
Okay, and now we see everything shown up here.
But we have something different going on here.
We see that our images are contained
inside the dimensions that we gave it so it doesn't lose its scaling.
And then our highlight category here is shown in a weird way.
So what we do want to do is change the resize mode contain to cover
and now it's going to cover the whole dimension that we gave it.
And moreover, we might want to create some kind of border radius for this.
So let's go to image and see if we have any kind of border radius on this.
Do we have anything?
Yeah, border radius is 20.
So let's set border radius,
horizontal scale 20 here so that these are showing in a nicer way.
And then what else do we need here?
Let's go to our single donation item
and we want this to be pressable which it is not currently.
So instead of view, let's create another component here called pressable.
And let's make this pressable and onpress what we're going to have to do is call
the props onpress function and pass it the donation item ID that was selected.
So here we're going to need an onpress
prop types function and it doesn't have to be required.
So let's create single donation item
default props here and say that onpress by default is going to be an empty function.
And then what we also should have forget
is that our single donation item does not accept a donation item ID prop.
So let's do that.
Let's make this required and say
that props type should accept a number that is required for donation item ID.
And now we're getting an error saying that's missing.
So let's pass it here and say
that the donation item ID is grabbed from our values.
Okay, so now if we were to press on an item, we could get the selected
donation ID and let's make sure everything's set up here.
Okay, let's load this and let's press on this.
And now we're getting the ID for this.
And this is two and this is four.
And this is eleven.
So this is working just fine.
We don't need this here.
I'm just going to leave it empty.
And there's one more thing that I wanted to mention.
If we reload our application right now,
we see that our selected category is going to be highlight automatically.
And if we were to change the selected
category to Environment, our items are going to change according to those.
So this is working just fine.
You can try it yourself.
You have the array that you can copy our description of the video.
And that's all.
Thanks so much for watching.
I'll see you in the next video where we're going to be styling this in a grid.