At present our image screen component is only passing a property called title down to each individual
image detail.
This prop is allowing our parent to configure a child component but we also want to make sure that our
parent of image screen also can figures which image each of these should show as well.
So we need to add in a second prop being passed from the parent down to each child.
We're going to make sure that inside that additional prop we specify exactly what image to show.
So let's get to it.
We're gonna first begin inside of our image screen J.S. file.
I'm gonna find each of my image detail elements right here and I'm going to add in a new prop to each
one.
Remember because this is a prop that you and I are adding in to a component we created.
We can use any name of prop that we want.
It's only for components created by other people or by React Native itself that we have to use some
pre established prop name with a very specific spelling.
So in this case I think that a prop name that makes sense would be like image source.
This is like the image to use or the source of the image that should be used.
This could just as easily bend something like image to use or image to show whatever else you want it
to be.
It just has to be a name that makes sense to you and other engineers are going to call it.
Image source OK.
So inside this thing we're going to provide a required statement to the image that we want this image
detail to show.
So once again we're gonna put in require and then a relative path to the image we want to show from
our assets directory.
So once again I'm going to go up one directory up another directory into assets and then I'll get forest
dot JP.
So now we can duplicate this prop down to the next two as well so we'll do a copy of just image source
and paste it once and paste it twice we can then update the second image to instead show beach I'll
do beach and then the last one to do mountain instead.
All right.
That looks good.
I'm going to save this file.
You'll notice that my code jumps.
That's just my code for matter.
Everything you see here is 100 percent equivalent to what you saw before.
It's just formatted slightly differently.
So now we can go into our image detail and we can receive this brand new prop that we've added in.
So instead of image detail that new prop of image source should be inside of this props object rather
than just accepting that on faith.
However let's do a quick console log that props object just to make sure that's the case so do a console
log of props right there and then save the file once again.
Remember to see this console log actually run.
We have to navigate to the image screen component inside our application.
It's over here a go to image demo and I should be able to flip back over to my terminal which is where
all of our all of our console logs appear and now we can see image source image source and image source.
You'll notice that they have kind of strange values here of 3 4 and 5.
That's totally fine.
These values you see right here are essentially an identifier that's been added in things that require
statement the identifier is pointing to some particular image.
So the property name is definitely image source.
We can essentially just believe that we are getting the correct image in here all right.
So now back inside of our image detail.
Now that we know that we've got that new prop inside of our props object we can use that as our source
right here going off to the image rather than the hardcoded require statement.
So I will delete that hard could require statement and replace it with perhaps dot image source again
image source.
We're using that because that's the name of the prop that we passed in from the parent Okay so let's
save this and we can do a final test here.
So back inside of my device I'll go to image demo and there we go.
So we now created a separate reusable component and we used it three separate times.
Each time we passed in a different set of props to customize how the component behaved we're going to
use this prop system a incredible number of times throughout this course to customize child components
that we create.
It's now that we've got a better idea of how this prop system works.
Let's take a quick pause right here and move on to our next subject in the next video.