Passing Data with Props: A Guide to React Component Communication

Previously in this course, we learned about creating static components to build our app's skeleton. While static components are a good start, a real application needs to be dynamic.

Today, we’re moving beyond hard-coded UI by learning how to pass information between components. In React, this is achieved through props.

What are Props?

"Props" is short for properties. Think of them as the arguments you pass to a JavaScript function, but for your React components. They allow a parent component to send data down to a child component, making your UI modular and reusable.

In React, data flow is unidirectional. This means data always travels from the top (parent) down to the bottom (child). By mastering this flow, you ensure your application remains predictable and easy to debug, as we explore in React props vs state: Mastering Unidirectional Data Flow.

Defining and Passing Props

To pass data, you add attributes to your component in JSX, just like you would with standard HTML attributes.

Imagine we are building our movie browser project. Instead of hard-coding a single movie title, we want a MovieTitle component that can display any title we give it.

Here is how you pass data to a child:

JSX
// ParentComponent.jsx
import MovieTitle from CE9178">'./MovieTitle';

function App() {
  return (
    <div>
      {/* We pass the CE9178">'title' attribute here */}
      <MovieTitle title="The Matrix" />
      <MovieTitle title="Inception" />
    </div>
  );
}

Accessing Props in a Child Component

When you pass an attribute, React bundles all those attributes into a single JavaScript object called props. The child component receives this object as its first argument.

JSX
// MovieTitle.jsx
function MovieTitle(props) {
  // props is { title: "The Matrix" }
  return <h1>{props.title}</h1>;
}

Because props is just a standard object, we often use object destructuring to make our code cleaner:

JSX
function MovieTitle({ title }) {
  return <h1>{title}</h1>;
}

Worked Example: A Reusable Movie Card

Let’s advance our movie browser project. We want a MovieCard that accepts both a title and a release year.

JSX
// MovieCard.jsx
function MovieCard({ title, year }) {
  return (
    <div className="movie-card">
      <h2>{title}</h2>
      <p>Released: {year}</p>
    </div>
  );
}

// App.jsx
function App() {
  return (
    <div>
      <MovieCard title="The Matrix" year="1999" />
      <MovieCard title="Inception" year="2010" />
    </div>
  );
}

By changing the attributes in App.jsx, the MovieCard component updates automatically. This is the core of component communication in React.

Hands-on Exercise

1. Open your project from Setting Up with Vite.
2. Create a new component file named Greeting.jsx.
3. Inside, create a component that accepts a name prop and renders an <h1> saying "Hello, [name]!".
4. Import Greeting into your App.jsx and render it twice with different names (e.g., <Greeting name="Alice" />).

Common Pitfalls

• Mutating Props: Props are read-only. Never try to reassign a prop value inside a child component (e.g., props.title = "New Title" will not work and is considered an anti-pattern). If data needs to change over time, use state, which we will cover in later lessons.
• Forgetting Curly Braces: When passing non-string values (like numbers or booleans), you must use curly braces: <MovieCard year={1999} />. If you write year="1999", React treats it as the string "1999".
• Case Sensitivity: Prop names are case-sensitive. If you pass movieTitle, you must access it as props.movieTitle, not props.movietitle.

Recap

We've covered the fundamentals of passing data via props. Key takeaways:

1. Props allow parents to pass data down to children.
2. Data flow is strictly unidirectional—always parent to child.
3. Access props by destructuring the props object in your function signature.
4. Keep props read-only; they are for configuration, not for internal component data storage.

Understanding these patterns is essential for managing React state management and the unidirectional data flow as your application grows in complexity.

Up next: We'll take what we've learned and build more complex, Dynamic Movie Cards that leverage these concepts to display full movie details.