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.

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.

Now, when we use UserProfile in the App component, we can pass user data as props:

In Practice