Welcome back! In the last lesson, you learned how to build a simple React component using JSX. Now, let’s take the next step and see how you can make your components reusable. In real-world applications, you often need to display similar pieces of information in different places. Instead of copying and pasting code, React lets you create components that can be reused with different data. This makes your code cleaner, easier to manage, and less error-prone.

In this lesson, you will learn how to use something called props to pass information into your components. This is a key skill for building flexible and powerful React applications.

Props (short for properties) are how we pass data from a parent component down to a child component.
Think of them as arguments to a function:

• A function can behave differently depending on the arguments you pass.
• A React component behaves differently depending on the props it receives.

Without props, every component would display the same static content. Props allow us to build flexible, reusable components.

The Problem Props Solve

Imagine you want to display multiple books. Without props, you’d have to copy the component code and hardcode each book’s title and author. That quickly becomes repetitive and hard to maintain.

Props solve this by letting you reuse the same component structure and simply supply different data each time. This makes your code cleaner, DRY (Don’t Repeat Yourself), and easier to scale.

Think of props like ingredients you give to a recipe. The recipe (component) stays the same, but the final dish (output) can change depending on the ingredients (props) you use.

For example, let’s say you have a Greeting component:

Here, props.name is a value you can set when you use the component:

This will display:

• The Greeting component is defined once.
• Different data ("Alice", "Bob") is passed in as props.
• The component renders differently each time without duplicating code.

props make your components flexible and reusable. Instead of hardcoding values, you can pass in different data each time you use the component.

Let’s put this into practice by building a reusable BookCard component. This component will display the title and author of a book. Instead of making a new component for every book, you can use the same BookCard and just change the props.

Here’s how you can do it:

1. Create the BookCard Component

Explanation:

• The BookCard component takes two props: title and author.
• These props are used to display the book’s title and author inside the card.
• The styling classes help make the card look nice, but the key idea is that the content comes from the props.

2. Use BookCard in Your App

Now, let’s use the BookCard component in your main app and pass different props to show different books:

Props let parents send information down to children. In our case:

• App knows which books should be displayed.
• BookCard knows how to display a single book, but not which one.
• Props are the “bridge” of communication between the two. This separation makes our components modular:
• The parent controls what data is shown.
• The child controls how that data is displayed.

• Positive Test: Add another <BookCard /> in App.tsx:

You should now see a fourth card.

• Negative Test: Try removing the title prop:

TypeScript will show an error: Property 'title' is missing in type ... This happens because our Props type requires both title and author. Props enforce correct usage.

So far, we’ve seen how props let us pass data into components. But what happens when some props are optional? In many cases, you’ll want to show one thing if a prop exists and another thing if it doesn’t. To do this cleanly, React developers often use two powerful tools in TypeScript/JavaScript: the ternary operator and the optional chaining operator.

1. The Ternary Operator (condition ? valueIfTrue : valueIfFalse)

The ternary operator is a shorthand way of writing an if/else expression inside JSX. It evaluates a condition and chooses between two values:

• If the condition is true, the first value ("Adult") is used.
• If false, the second value ("Minor") is used.

In a React component, this is very useful for conditional rendering. For example:

• If role is provided, it renders: User role: admin.
• If role is missing, it renders: The role of this user is not defined.

This allows your UI to adapt gracefully depending on the props.

The optional chaining operator (?.) is used when you’re not sure if a property exists. Instead of causing an error when accessing null or undefined, it will safely return undefined.

Example:

• Without optional chaining, user2.profile.bio would throw an error.
• With ?., the expression simply evaluates to undefined when the chain breaks.

This is very useful when working with props that may or may not exist, especially if they are objects with deeper properties.

By combining props, the ternary operator, and optional chaining, you can create components that handle both required and optional data gracefully.

For example, in a UserCard:

Key Takeaways

• Ternary operator: a concise way to handle if/else inside JSX.
• Optional chaining: safely access properties without crashing when something is undefined.
• Used together with props, these tools make components more robust and flexible.

In your upcoming practice, you’ll use both of these operators when building the UserCard component. This will give you hands-on experience with conditional rendering and handling optional props.

In this lesson, you learned how to make your React components reusable by using props. You saw how props let you pass different data into a component, making it flexible and powerful. You also built a BookCard component and used it to display several books in your app.

• Props let components receive input data.
• They make components reusable and dynamic.
• Props establish communication from parent → child.
• In our project named ShelfPilot, we used props to display multiple books with a single BookCard component.

Next, you’ll get a chance to practice creating and using props yourself. This will help you get comfortable with one of the most important ideas in React. Keep going — your skills are growing with every lesson!