Passing Data with Props: Building Parent-Child Components

Hey!

If you've been following along, you've successfully created your first React component—the one that says "Hello, World!" It was a great first step, but that component is static. It will always say the same thing, no matter what.

In this article, we're going to unlock the real magic of React. We'll dive into props, which are the key to making your components dynamic and reusable. Think of props as a way to pass data into a component, just like you pass arguments into a function.

By the end of this article, you'll know how to create one component and then use it over and over with different data to display whatever you want.

Answer to previous Homework Problem

import './App.css'

function App() {

  return (
    <>
      <h1>Hello, World!</h1>
      // Replace The below code with your real name
      <h1>Your Name</h1>
    </>
  )
}

export default App

Let's dive in and start passing data!

The Problem with Static Components

In the last article, you successfully created your first React component—a simple <h1> tag that proudly says "Hello, World!". Congratulations! It was an amazing first step, but that component is static. It's hard-coded to always display the same text, no matter where you put it in your application.

This is a problem for building a real-world application. Think about a social media feed. Every post has a different username, profile picture, and text. You wouldn't want to create a brand new component for every single post. That would be incredibly inefficient and messy.

So, how do we solve this? How do we build one component and then use it over and over again with different data?

The answer is props.

You can think of a React component without props as being like a simple JavaScript function with no arguments; it always returns the same value. Props, which stand for "properties," are like the arguments you pass into a function. They allow you to customize a component's output without changing its core code, making it reusable and dynamic.

Just as a function can take different arguments to produce a different result, a component can take different props to render different data. This simple concept is the key to building powerful, flexible applications.

What Exactly Are Props?

Let's get a clear, concise definition of props.

The term props is short for properties. At their most basic, they are a mechanism for passing data from a parent component down to a child component.

Think of your components as a family tree. Data can flow down from the parent (App) to its children (Welcome), but not the other way around. A component can receive props from its parent and use that information to decide what to render.

A crucial rule to remember about props is that they are read-only. A child component receives the data, but it cannot change it. You can't modify props inside the component that receives them. This rule is a core part of React's design philosophy, as it ensures that your data flow is predictable and easy to reason about.

In short, props are how you give your components instructions about what they should display and how they should behave.

Your First Component with Props

It's time for the hands-on part! We're going to build a reusable Welcome component that can display a greeting with any name we give it.

Create a New File:
Inside your src folder, create a new file and name it Welcome.jsx. This is where we will write the code for our new component.

Add the Component Code:
Open the Welcome.jsx file and paste the following code into it.

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Welcome;

Understanding the Code:

• The Welcome function now takes an argument called props. This is a JavaScript object that will contain all the data passed to our component. Inside the return statement, we use curly braces {} to embed JavaScript directly into our JSX. When React renders this, it will replace {props.name} with the actual value of the name property.
• We also added an export default statement. This makes our Welcome component available for other files (like App.jsx or similar) to import and use.

You have now successfully created a reusable component that is ready to receive and display data! In the next step, we'll see how to pass that data to it from the App component.

Using Your New Prop-Powered Component

Now that we have our Welcome component ready to receive data, let's see how we use it. We will work inside the App.jsx file, as this is the parent component that will pass data down to its children.

• Import the New Component: At the top of your App.jsx file, add an import statement for our new component.

import Welcome from './Welcome';

• Call the Component with Props: Now, clear out the existing content inside the return statement in your App.jsx file. We will replace it with our new Welcome component and pass it a name prop.

<Welcome name="World" />

Your App.jsx should look like this:

import './App.css'
import Welcome from './Welcome.jsx'

function App() {
  return (
    <>
      <Welcome name="World" />
    </>
  )
}

export default App

The Result:
The Browser should look like this:

Let's Check Reusability:
This is where you see the power of props! You can reuse your Welcome component as many times as you like, passing a different name prop each time. Try it yourself by adding a few more lines. Update the App.jsx file with the following code:

import './App.css'
import Welcome from './Welcome'

function App() {
  return (
    <>
      <Welcome name="John Doe" />
      <Welcome name="React" />
      <Welcome name="Friend" />
    </>
  )
}

export default App;

The results should look like this:

Most Common mistakes with props (Even I made this, sometimes do it now)

1. Trying to Change a Prop
A key rule of React is that props are read-only. You cannot change a prop's value inside the component that receives it. Trying to do so will result in an error or unexpected behavior.

Incorrect Way:

// In the child component
function Welcome(props) {
  // This is a big no-no!
  props.name = "New Name"; 
  return <h1>Hello, {props.name}</h1>;
}

Correct Way:
If a component needs to change its own data, that data should be managed with state, not props.

2. Passing Numbers and Booleans as Strings
When I first started using props, I made a very common mistake: I passed everything as a string. One day, I had a component that was supposed to render only when a prop was true, but it kept rendering even when I passed it "false".

After a lot of head-scratching, I found my mistake: in JavaScript, all non-empty strings are considered truthy. That means "false", "0", and " " are all treated as true in a boolean context. This is a crucial lesson to learn early on.

In JSX, anything you put inside double quotes "" is treated as a string literal. If you want to pass a JavaScript value—like a number, a boolean, an array, or an object—you must wrap it in curly braces {}.

Here's a comparison of the incorrect and correct ways to pass these values.

Incorrect Way:

// App.jsx
<UserCard age="25" /> 

// UserCard.jsx
// props.age will be the string "25", not the number 25.
function UserCard(props) {
  return <p>Age: {props.age}</p>;
}

Correct Way:

// App.jsx
<UserCard age={25} /> 

// UserCard.jsx
// props.age is the number 25.
function UserCard(props) {
  return <p>Age: {props.age}</p>;
}

3. Not Destructuring Props
While not technically a mistake, this is a common pattern that makes code verbose and less readable.

I remember my first component that took more than two props. The component needed to display the user's name, age, location, and a short bio.

I started writing the code using props.name, props.age, props.location, and props.bio. The code worked, but it started to feel messy. The repetition was tedious, and I constantly had to look at the top of the file to remember the exact prop names. I'd sometimes type props.userLocation instead of props.location, leading to a quick, confusing bug.

The code worked, but it was just a lot of mess. This is where destructuring comes in as a cleaner, more efficient solution.

Old way:

const UserProfile = (props) => {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>{props.bio}</p>
    </div>
  );
};

New Way:

const UserProfile = ({ name, bio }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>{bio}</p>
    </div>
  );
};

The Takeaway:

We just did something powerful. We took our simple, static "Hello, World" program and made it dynamic and reusable. This is the core magic of React. Instead of writing a new component for every single piece of content, we can use a single component and simply pass in different props to customize it.

You've now learned that:

• Props are like arguments for your components.
• They are passed from a parent component to a child component.
• They are read-only, meaning the child component can use them but cannot change them.

This concept of passing data down is the foundation of building complex React applications.

Homework Challenge:

To make sure these concepts stick, here is a small challenge for you:

Image created using Canva

This exercise will help you get comfortable with passing multiple props to a single component and seeing the power of reusability firsthand.

How to Submit Your Solution

If you want to share your work or get feedback, you can share a screenshot of your finished project in the comments below. You can also paste your updated App.jsx code directly into the discussion to get feedback from me and the community. The next article will have the answer to this homework problem.

Upcoming Article

Congratulations on finishing Props! You're now a pro at using props to make your components dynamic. In the next article, we'll tackle the other major concept for building interactive UIs: State.

We'll learn how to make a component remember information about its own state (like whether a button is clicked or not) and how to handle user interactions.

See you on Friday!

Reference

• Props by NetNinja: youtube.com/watch
• React Official Documentation: Legacy Documentation

Let's Connect!

If you found this article helpful, please consider following me on Dev.to. You can also connect with me on these platforms for more content and conversation:

• LinkedIn: linkedin.com/in/mariamendonca/
• GitHub: github.com/mendoncamaria
• X: @mmendonca0610
• Mastodon Social: @mendoncamaria