Welcome to the very first lesson of the "Introduction to Props and Event Handlers in React Native" course! I’m excited to guide you as we begin our journey into building interactive and reusable mobile apps with React Native. In this lesson, we’ll focus on one of the most fundamental concepts: props. Props are the primary way to pass data from one component to another, making your components flexible and powerful. By the end of this lesson, you’ll understand how to use props to display dynamic content — using Cosmo’s Greatest Hits as our example — and you’ll be ready to apply these ideas in your own projects.

Let’s start by considering a common challenge: hardcoded data. Imagine you want to display information about an album in your app. You might create a component like this:

This works, but it’s not very flexible. If you want to show a different album, you’d have to change the code inside the component. If you want to show a list of albums, you’d have to copy and paste this component multiple times, changing the values each time. This approach quickly becomes unmanageable as your app grows.

The real world is dynamic. Data changes, and users expect to see different content without you having to rewrite your components every time. That’s where props come in.

Props, short for “properties,” are a way to pass information from a parent component to a child component. Think of props as arguments you give to a function. In React Native, you can make your components reusable by allowing them to accept props and display different content based on the data they receive.

Let’s update our Album component to accept props:

Now, instead of hardcoding the album details, we define them as props. Notice that year is now optional (year?: number). Inside the component, we use const displayYear = year ?? "Unknown"; to show "Unknown" if no year is provided. This makes the component reusable for any album. You can use this component like so:

This example shows how props allow you to pass different data to the same component, making your code cleaner and more maintainable.

When working with props, it’s important to define what kind of data your components expect. TypeScript helps you do this by letting you create interfaces for your props. This ensures that your components receive the right data and helps catch errors early.

For example, in our Album component, we defined an interface:

By making year optional (year?: number), you can safely omit it when you don’t know the value. Inside the component, you can derive a display string:

This way, your UI will show "Unknown" if the year is not provided, but TypeScript will still enforce that if a year is given, it must be a number.

Another common pattern is to provide a default value for a prop directly in the function parameter list using parameter destructuring. For example:

This approach sets a default value for year if it is not passed in. You can use this technique for any optional prop, and it can help simplify your component logic.

If you try to use the Album component without a required prop, like this:

TypeScript will show an error if you omit a required prop like coverUrl, but it will not complain about year since it is now optional or has a default value. This helps prevent bugs before your app even runs.

Let’s see how props work in a real-world scenario by building a list of Cosmo’s Greatest Hits. First, we’ll create an array of album data in our main App component and pass it down to a child component called AlbumList.

Here’s a simplified version of the main app:

In this code, we define an array of album objects and pass it as a prop called albums to the AlbumList component.

Now, let’s look at the AlbumList component:

Here, AlbumList receives the albums prop, which is an array of album objects. It loops through the array and renders an Album component for each one, passing the album details as props using . This pattern allows you to display as many albums as you want, with each one showing the correct information.

In this lesson, you learned why hardcoded data is limiting and how props make your React Native components flexible and reusable. We explored how to define and use props, pass data from parent to child components, and use TypeScript interfaces to ensure your components receive the right data. You also learned how to handle optional props and display fallback values when data is missing.

You’re now ready to put these concepts into practice! In the next set of exercises, you’ll build and update components using props, just like we did with Cosmo’s Greatest Hits. This hands-on experience will help you solidify your understanding and prepare you for more advanced topics in React Native. Let’s get started!