1
00:00:01,070 --> 00:00:03,710
In this video we're gonna go over a really quick solution here.

2
00:00:03,740 --> 00:00:05,030
So let's get to it.

3
00:00:05,070 --> 00:00:10,160
The first we need to do is pass in a new prop to communicate from the image screen down to the image

4
00:00:10,160 --> 00:00:11,270
detail.

5
00:00:11,270 --> 00:00:13,160
So here's my image screen right here.

6
00:00:13,520 --> 00:00:16,490
For each my new image detail components I'm showing inside of here.

7
00:00:16,600 --> 00:00:20,590
I'm going to add in a new prop and I'm going to call it score.

8
00:00:20,600 --> 00:00:26,000
Now this is a javascript expression not quite a variable that we are referring to whenever we want to

9
00:00:26,000 --> 00:00:30,500
assign a number to a prop it has to be assigned inside of a set of curly braces.

10
00:00:31,130 --> 00:00:34,000
So for this new one I'll give or the first one I'll give it a score of nine.

11
00:00:34,700 --> 00:00:40,280
But the second one I'll give it a score of seven and I'll be generous on the last one I'll do a score

12
00:00:40,280 --> 00:00:40,840
of 10.

13
00:00:40,850 --> 00:00:45,390
Like so remember we are deciding what property name to use.

14
00:00:45,390 --> 00:00:50,040
It's got a band called score or score for image or whatever else you want it to be.

15
00:00:50,040 --> 00:00:55,370
Just has to be something that makes sense to you so we can now save this file and then go over to our

16
00:00:55,370 --> 00:00:56,630
image detail.

17
00:00:56,630 --> 00:01:02,280
Now we can try to make use of that new prop it's going to add in a new text element underneath the existing

18
00:01:02,280 --> 00:01:11,190
one and I'll give it the text image score a dash and then I'll print out props dot score like so now

19
00:01:11,250 --> 00:01:12,550
we can save this.

20
00:01:12,930 --> 00:01:17,660
And if we test it out once again I'll see image score of nine seven in 10.

21
00:01:17,730 --> 00:01:19,240
Very good.

22
00:01:19,290 --> 00:01:24,130
Last thing that we could do as a little Optum has to be optional optimization to our image detail.

23
00:01:24,170 --> 00:01:28,780
Remember we don't necessarily have to refer to the entire props object right here if we want to.

24
00:01:28,790 --> 00:01:31,970
We could de structure off only the properties we care about from it.

25
00:01:32,600 --> 00:01:37,580
So I could replace props are right there with a set of parentheses and curly braces inside.

26
00:01:37,850 --> 00:01:41,660
And then just reference the different properties that I want to get access to.

27
00:01:41,660 --> 00:01:49,170
So in that case would be an image source title and score and then we can remove three references to

28
00:01:49,170 --> 00:01:51,560
props that we have inside of our function.

29
00:01:51,660 --> 00:01:52,070
So I'll do it.

30
00:01:52,080 --> 00:01:55,110
Prop stock prop Scott and prop Scott.

31
00:01:55,320 --> 00:01:59,910
So I have no more references to props inside of my component anymore.

32
00:01:59,910 --> 00:02:01,840
Again this is a hundred percent optional.

33
00:02:02,070 --> 00:02:06,830
You might see is done in the community very frequently just because it saves a little bit of typing.

34
00:02:06,860 --> 00:02:11,990
So now we can say this once again and we should still see everything up here as expected and I'll do

35
00:02:11,990 --> 00:02:15,430
a quick test on Android as well.

36
00:02:15,580 --> 00:02:19,080
I'll go to my image demo and yep looks good.

37
00:02:19,200 --> 00:02:20,450
All right cool so that's props.

38
00:02:20,460 --> 00:02:22,240
And we've got a good example in.

39
00:02:22,290 --> 00:02:25,860
So once again let's take a pause right here and move on to our next topic in the next video.