Props
Theory
Props (short for properties) are a way to pass data from a parent component to a child component. They are similar to function arguments. Props allow you to customize and configure child components based on the requirements of the parent component.
Why do we need Props?
Props make components reusable and configurable. They enable the parent component to communicate with its children by passing data and functionality to them.
Working with Props
Passing Props
We pass props by including them as attributes when we use a component.
In this example, the ParentComponent
passes a prop called message
with the value 'Hello from parent'
to ChildComponent
.
Receiving Props
In the receiving component (ChildComponent
in this case), we can access the passed props as properties of the props
object.
The ChildComponent
receives the message
prop and renders it within a Text
component.
Default Props
We can define default values for props in case they are not provided.
Code Description
- Line 5: component accepts props as its argument, which represents the properties passed to it.
-
Line 7: Declares a constant
message
which is assigned the value ofprops.message
if it's provided. Ifprops.message
is not provided (or evaluates tofalse
, e.g.,null
orundefined
), it defaults to'Default Message'
. -
Line 9: Renders a
Text
component with the content of themessage
constant inside.
Here, if message
is not provided as a prop, it defaults to 'Default Message'.
Example
Consider a scenario where we have a UserProfile
component that receives user data as props.
Code Description
-
Line 5: Defines a functional component named
UserProfile
that takes a prop nameddata
. -
Line 6: Destructures the
data
prop to extractusername
andbio
. This assumes that the data prop is an object with propertiesusername
andbio
. -
Lines 8-13: The component renders the
username
andbio
values within aView
usingText
components.
Now, when we use UserProfile
in the App
component, we can pass user data as props:
Code Description
-
Lines 7-10: Creates a sample
user
object with propertiesusername
andbio
. This data will be passed to theUserProfile
component as a prop. -
Line 15: Renders the
UserProfile
component and passes theuser
data as a prop nameddata
. This prop is accessed within theUserProfile
component.
In Practice
¿Todo estuvo claro?
Contenido del Curso
Foundations of React Native
Foundations of React Native
Props
Theory
Props (short for properties) are a way to pass data from a parent component to a child component. They are similar to function arguments. Props allow you to customize and configure child components based on the requirements of the parent component.
Why do we need Props?
Props make components reusable and configurable. They enable the parent component to communicate with its children by passing data and functionality to them.
Working with Props
Passing Props
We pass props by including them as attributes when we use a component.
In this example, the ParentComponent
passes a prop called message
with the value 'Hello from parent'
to ChildComponent
.
Receiving Props
In the receiving component (ChildComponent
in this case), we can access the passed props as properties of the props
object.
The ChildComponent
receives the message
prop and renders it within a Text
component.
Default Props
We can define default values for props in case they are not provided.
Code Description
- Line 5: component accepts props as its argument, which represents the properties passed to it.
-
Line 7: Declares a constant
message
which is assigned the value ofprops.message
if it's provided. Ifprops.message
is not provided (or evaluates tofalse
, e.g.,null
orundefined
), it defaults to'Default Message'
. -
Line 9: Renders a
Text
component with the content of themessage
constant inside.
Here, if message
is not provided as a prop, it defaults to 'Default Message'.
Example
Consider a scenario where we have a UserProfile
component that receives user data as props.
Code Description
-
Line 5: Defines a functional component named
UserProfile
that takes a prop nameddata
. -
Line 6: Destructures the
data
prop to extractusername
andbio
. This assumes that the data prop is an object with propertiesusername
andbio
. -
Lines 8-13: The component renders the
username
andbio
values within aView
usingText
components.
Now, when we use UserProfile
in the App
component, we can pass user data as props:
Code Description
-
Lines 7-10: Creates a sample
user
object with propertiesusername
andbio
. This data will be passed to theUserProfile
component as a prop. -
Line 15: Renders the
UserProfile
component and passes theuser
data as a prop nameddata
. This prop is accessed within theUserProfile
component.
In Practice
¿Todo estuvo claro?