In the last section we created our image list component and we're now ready to take this list of images
and show them to the users somehow.
Now before you start to write any code inside this component I want to do a quick review on a kind of
fundamental thing around javascript arrays very quickly if you are already very familiar with mapping
javascript race feel free to pause a video right now and continue in the next video.
Otherwise stick around and we're going to do a very quick review.
All right so we're going to pull up that same little code editor that we used very briefly when we are
talking about context earlier.
Here's a link to it on the screen.
So my full name get Hublot IO slash playgrounds.
Remember no.
And in my last name everyone always puts an end in there.
OK.
So a quick reminder here in this little code editor we can create a variable.
Like I don't know I number modern or whatever make it 10.
And then if we start to reference that number or do operations on it we're going to print out the results
over here and it's all live updating.
So let's create a little array in here and I want to remind you on how to write a map statement with
javascript because understanding map statements is absolutely key to building lists of components with
react.
So I'm going to put together an array of numbers and I'll put in 0 1 2 3 4 like so that'll work for
now.
All right so now I want to somehow produce a brand new array.
And in this new array I went to multiply every one of these values by 10 but really take note of that
statement or how I laid out that problem.
I want to create a new array.
I don't want to loop this through this array and change all the numbers in here.
I want to create a brand new one.
So let's try doing that first by writing out a simple for loop.
I'm going to declare a empty array first then I'll call new numbers.
And then I'll write out a for loop use.
Let all the way through a loop as long as ISIS then numbers some length and I'll go as long as I plus
plus And then inside of here all say new numbers.
Push all take numbers at I.
And I'm going to multiply that by 10 like so.
And then after the for loop I'm going to reference new numbers and I'll see that I have all those original
values multiplied by 10.
And in addition I can print out the original numbers and the original numbers array has not been changed
in any way.
So essentially when I ran the for loop right here I did not mutate or change the existing array.
I just did some calculation and stuck each of those different numbers to those updated numbers into
this brand new array.
Now a map statement in javascript is going to do the exact same thing as what you are doing right here.
A mapping statement is going to iterate over an array.
It's going to return a brand new array the brand new array is going to take each of the original values
and modify them in some fashion.
That's it.
Same thing as exactly what you see right here just with some very condensed syntax so to show you how
this works.
I'm going to clean up those two variables down there.
And now we'll do a numbers map like so.
So here's the mapping function.
This is a function.
We pass a function to it.
You can either pass it a function keyword or we can do a arrow function like so totally up to you.
Now this inner function right here is going to be called with each element in the original array.
We receive each of those elements as an argument inside of here.
We can use any name for this argument that you want to use.
I personally use the singular form of whatever I'm calling that array so if this thing right here is
called numbers I might call the argument here is simply a number.
Now unfortunately javascript number is a keyword so I can't use that word in this case so I'll just
call it like no short for number so then inside of here I'm going to do some calculation on this value
and then return it from this inner function.
So I will say Nahm times 10 like so and then you'll see over here I've got the same array that we got
when we did that really long for a loop right there.
And if I print out numbers underneath it all see that it did not change the original array I just created
a brand new one.
Now this is pretty compact right here compared to writing out a for loop and having to define an array
ahead of time.
We could simplify it even further by removing the return keyword and then removing both those curly
braces and the semi-colon and now right here with just that statement we've got the same thing as before.
And you what we can actually go even further I removing those parentheses around the argument.
OK.
That's map statements right there.
Like I said You're really got to understand these map statements to understand how we're going to build
a list with Riak components is as you might imagine all we're going to do here is loop over all the
images in that array.
And for each image in there we're going to return a brand new component.
Let's do a very quick example of that back over here.
So I'm going to delete all that stuff and then inside of here I'll do another numbers.
Map and I'll say for each number or not in this case I'm going to return a div and inside that div I'm
going to reference Namma like so.
So that's pretty much exactly what it's going to look like.
All right.
So let's take a quick pause right here.
When we come back the next section we're going to map over our list of images rather than these numbers
that you see right here and it will make sure that we return that list of images from the image list
component.