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.

functionApp() {
return (
<div>
<Greetingname="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:

<UserCardname="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

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

Option B: Use destructuring (more common)

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

Both approaches work. Destructuring keeps the code shorter.

You can receive multiple props:

functionUserCard({ 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:

functionApp() {
return<Welcomemessage="Welcome to the dashboard"/>;
}

Child:

functionWelcome({ message }) {
return<p>{message}</p>;
}

Example 2: Passing numbers and booleans

Parent:

functionApp() {
return<Scorepoints={42}isWinner={true}/>;
}

Child:

functionScore({ 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:

functionApp() {
consthandleClick= () => {
alert("Button clicked");
  };

return<ButtononClick={handleClick}/>;
}

Child:

functionButton({ onClick }) {
return<buttononClick={onClick}>Click me</button>;
}

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

Example 4: Passing objects and arrays

Parent:

functionApp() {
constuser= { name:"Riley", role:"Admin" };
consttags= ["React","JavaScript","Frontend"];

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

Child:

functionProfile({ user, tags }) {
return (
<div>
<h2>{user.name}</h2>
<p>Role: {user.role}</p>
<ul>
        {tags.map((tag,index) => (
<likey={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:

<UserCardage="28"/>

Why it breaks:

The value becomes a string instead of a number.

Correct approach:

<UserCardage={28}/>

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

Mistake 2: Using the wrong prop name

What you might do:

Parent:

<Greetingusername="Alex"/>

Child:

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

Why it breaks:

The child expects name, but the parent sends username.

Correct approach:

Match the names:

<Greetingname="Alex"/>

Or update the child:

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

Mistake 3: Trying to modify props inside the child

What you might do:

functionCounter({ 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.