Hi and welcome to this tutorial on react native props and prop types.
Props, short for properties,
are a way to pass data from a parent component to a child component.
In react native.
Prop types is a way to validate
that the data that is passed to your component is of the expected type.
In this tutorial we will learn why props
are useful, how to them in your react native app, and also how to use prop types
to validate that the data that is passed is of the expected type.
You're now looking at my screen
with my editor opened and my simulator opened and my Metro running,
and the editor is displaying the code that we had exactly in the last video.
We're now going to clean up our app component.
We're going to get rid of my text component here.
Going to take a look at how to use props in a real world scenario.
Today for the purpose of displaying how props work exactly, we're going to create
a new component that we're going to call an item, and this item is going to be
displaying the name of the item and the price of the item.
In the parent component,
we usually would define the props that we want to pass to the child component
and then pass them as attributes whenever we render the child component.
Now let's create this child component.
We're going to be creating a new directory
called item, and then we're going to be creating a new
JavaScript file that's also going to be named as Item.
We're going to import react and we're
going to create the item variable that is going to be a functional component
and it's going to be returning something that we're going to define later.
For now, let's export the item component so that it's useful for us.
Let's create a view container and let's import view and text
from react native and let's define our text
and that we're going to have a name here and let's define a second text
and this is going to be our price.
Now, if we want to use this component in our application, simply import the item
from the components folder, item directory, item file.
And now we're going to use this item tag
here and we're going to be seeing name and price in our simulator.
So now what we want to do is create the actual props for this component.
And the way to do this is that we have
to make the item component accept name and price as data.
So let's say that we're going to be
passing name and price to this item, and let's use the JavaScript expression
here to say that we need to display the variable values of name and price here.
Now, if we save this, we're going to see that nothing is
displayed because both of these variables are undefined.
And the reason they are undefined is
because we haven't passed any properties from here.
So what we want to do is create a property here called Name and we're going to say
that we're selling a table and the price of this table is $20.
Now we see that a table with a price of $20 appears here.
What we can also do is create a list
of items and we can be selling a chair and we can
also be selling a desk and the prices can change.
This means that we created one reusable
component that accepts name and price as variables.
And we can use this component to display any price and any name of the item
that we're selling as long as we give it the information that it requires.
Previously, we saw that even though we
didn't give any properties to the item component, we didn't get any errors here.
And Prop Types is what could help here
to ensure that the data is passed to our component and that it's of expected type.
Let's start using prop types here.
For this, what we're going to have to Dom is import Prop Types.
However, Prop Types has its own library that we need to install.
So let's go to terminal.
I'll need to open a new terminal and I'll navigate to my project
which is new application, and then I'm going to install Prop Types.
The way to do this is NPM install
Prop Types and the Prop Types has been installed.
So now we're ready to use Prop Types.
All we need to do for this is import Prop types from Prop Types.
And just before we export our functional
component, we're going to define the properties that it's expecting.
The way to do this is just to open an object, say that we're expecting
a name and it has to be of type string and that it's required.
And then we're going to say that we also
need a price and it needs to be a number and it's also required.
Now, if we save this, we're going to see that we have a warning here.
And if we click on this, we're going to see that it is marked as
required, but its value is actually undefined.
So we can dismiss this warning here.
We can go back to our app file and we can
say that the name is Desk and the price
is 200 and now we get no warning.
Prop Types can be used to check for strings, numbers, booleans and more.
An advanced developer would use Prop Types to validate the data passed in their
application to ensure that the data is of the expected type
and this will be preventing bugs and any unexpected behavior.
It also makes the code more readable
and maintainable for other developers who might work on the same project.
Additionally, it can be a great tool for catching errors early
in the development process before they become a bigger issue.
Props and Prop Types are powerful features
in react native that allow for easy and efficient data management and validation.
By understanding how to use prop types and props, you can create more modular
and reusable components in your React native application.
Thanks for watching and see you in the next video.