How to Pass Props in React

What you’ll build or solve

You’ll create a parent component that sends data to a child component using props.

When this approach works best

This approach works best when:

• You want to reuse the same component with different data.
• You need to pass configuration values like titles, IDs, or flags.
• You structure your app with parent and child components.
• You want a clean data flow from top to bottom.

This is a bad idea if components need to share complex state in many directions. In that case, you may need context or a state management solution.

Prerequisites

• A working React project
• Basic understanding of function components
• Familiarity with JSX

Step-by-step instructions

Step 1: Define props on the parent component

Props are passed as attributes when you use a component.

function App() {
  return (
    <div>
      <Greeting name="Alex" />
    </div>
  );
}

Here, name is a prop passed to the Greeting component.

Props look like HTML attributes, but they carry JavaScript values.

You can pass:

• Strings
• Numbers
• Booleans
• Arrays
• Objects
• Functions

Example with multiple props:

<UserCard name="Sam" age={28} isOnline={true} />

What to look for

• Use curly braces {} for non-string values.
• Strings can use quotes.
• Prop names are case-sensitive.

Step 2: Receive props inside the child component

You receive props as function parameters.

Option A: Access the full props object

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

Option B: Use destructuring (more common)

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

Both approaches work. Destructuring keeps the code shorter.

You can receive multiple props:

function UserCard({ name, age, isOnline }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Status: {isOnline ? "Online" : "Offline"}</p>
    </div>
  );
}

That is the full passing flow: parent defines, child reads.

Examples you can copy

Example 1: Passing a string

Parent:

function App() {
  return <Welcome message="Welcome to the dashboard" />;
}

Child:

function Welcome({ message }) {
  return <p>{message}</p>;
}

Example 2: Passing numbers and booleans

Parent:

function App() {
  return <Score points={42} isWinner={true} />;
}

Child:

function Score({ points, isWinner }) {
  return (
    <div>
      <h2>Points: {points}</h2>
      {isWinner && <p>You won!</p>}
    </div>
  );
}

Boolean props often control conditional rendering.

Example 3: Passing a function as a prop

Parent:

function App() {
  const handleClick = () => {
    alert("Button clicked");
  };

  return <Button onClick={handleClick} />;
}

Child:

function Button({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
}

Functions passed as props allow child components to trigger logic in the parent.

Example 4: Passing objects and arrays

Parent:

function App() {
  const user = { name: "Riley", role: "Admin" };
  const tags = ["React", "JavaScript", "Frontend"];

  return <Profile user={user} tags={tags} />;
}

Child:

function Profile({ user, tags }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Role: {user.role}</p>
      <ul>
        {tags.map((tag, index) => (
          <li key={index}>{tag}</li>
        ))}
      </ul>
    </div>
  );
}

Complex data works the same way as simple values.

Common mistakes and how to fix them

Mistake 1: Forgetting curly braces for JavaScript values

What you might do:

<UserCard age="28" />

Why it breaks:

The value becomes a string instead of a number.

Correct approach:

<UserCard age={28} />

Use curly braces for numbers, booleans, objects, arrays, and functions.

Mistake 2: Using the wrong prop name

What you might do:

Parent:

<Greeting username="Alex" />

Child:

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

Why it breaks:

The child expects name, but the parent sends username.

Correct approach:

Match the names:

<Greeting name="Alex" />

Or update the child:

function Greeting({ username }) {
  return <h1>Hello, {username}</h1>;
}

Mistake 3: Trying to modify props inside the child

What you might do:

function Counter({ count }) {
  count = count + 1;
  return <p>{count}</p>;
}

Why it breaks:

Props are read-only. Changing them does not update the parent.

Correct approach:

Use state in the parent and pass updated values down.

Troubleshooting

If a prop shows as undefined, check the prop name in both parent and child.

If you see [object Object], confirm you are rendering a property like user.name, not the whole object.

If a function prop does nothing, confirm it is passed correctly and attached to an event like onClick.

If values do not update, check that state changes happen in the parent.

Quick recap

• Pass props as attributes in JSX.
• Receive props as function parameters.
• Use curly braces for JavaScript values.
• Props are read-only.
• Keep prop names consistent between parent and child.