React Props

Props are one of the most important concepts in React.

The word props is short for properties. Props allow you to pass information from one React component to another, usually from a parent component to a child component.

For example, a parent component can pass a course title to a CourseCard component:

function App() {
  return (
    <CourseCard title="React Fundamentals" />
  );
}

The CourseCard component can receive and use that information:

function CourseCard(props) {
  return (
    <h2>{props.title}</h2>
  );
}

The result displayed in the browser is:

React Fundamentals

The important idea is:

Parent Component
       ↓
      Props
       ↓
Child Component

Props make components dynamic, flexible, and reusable.

Why Do We Need Props?

Without props, components would often need to hardcode their data.

For example:

function CourseCard() {
  return (
    <article>
      <h2>React Fundamentals</h2>
      <p>Learn React from the beginning.</p>
    </article>
  );
}

This component can display only one specific course.

If you want to display another course, you would need to change the component itself.

Props solve this problem.

function CourseCard(props) {
  return (
    <article>
      <h2>{props.title}</h2>
      <p>{props.description}</p>
    </article>
  );
}

Now the parent can provide different information:

<CourseCard
  title="React Fundamentals"
  description="Learn React from the beginning."
/>

<CourseCard
  title="JavaScript Essentials"
  description="Learn modern JavaScript."
/>

The same component can now display different content.

This gives us a simple pattern:

One Component
      ↓
Different Props
      ↓
Different Results

Props Connect Components

Props create a communication mechanism between components.

Consider:

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

Here, App passes the name prop to WelcomeMessage.

The child receives it:

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

The result is:

Welcome, Alex!

The relationship is:

App
 │
 │ name="Alex"
 ↓
WelcomeMessage

The parent provides the information, and the child uses it.

Props Are Passed in JSX

Props are passed when you render a component.

For example:

<UserCard name="Sarah" />

Here:

name

is the prop name.

"Sarah"

is the prop value.

You can pass multiple props:

<UserCard
  name="Sarah"
  role="Frontend Developer"
  experience={2}
/>

The child receives all three values.

Props Can Contain Different Types of Data

Props are not limited to strings.

You can pass:

• Strings
• Numbers
• Booleans
• Arrays
• Objects
• Functions
• JSX
• Other values supported by JavaScript and React

For example:

<CourseCard
  title="React"
  price={499}
  available={true}
/>

Here:

title     → string
price     → number
available → boolean

JavaScript expressions are used when passing values such as numbers, booleans, variables, objects, arrays, and function references.

Passing a Variable as a Prop

You can pass a JavaScript variable as a prop.

function App() {
  const courseName = "React Fundamentals";

  return (
    <CourseCard title={courseName} />
  );
}

The value of courseName is passed to CourseCard.

You can also pass other variables:

function App() {
  const progress = 75;

  return (
    <CourseCard progress={progress} />
  );
}

This is useful when information comes from:

• API responses
• Arrays
• User input
• State
• Calculations
• Configuration
• Other components

Passing Numbers as Props

When passing a number, use curly braces.

<CourseCard progress={75} />

This passes the number:

75

If you write:

<CourseCard progress="75" />

then the value is a string:

"75"

These values have different JavaScript types.

progress={75}

means:

number

while:

progress="75"

means:

string

This distinction can matter when performing calculations or comparisons.

Passing Boolean Props

Boolean values are also passed using JavaScript expressions.

<CourseCard available={true} />

You can also use the shorthand form:

<CourseCard available />

The shorthand means:

<CourseCard available={true} />

For a false value, explicitly pass:

<CourseCard available={false} />

Boolean props are useful for controlling UI behavior.

For example:

function CourseCard({ available }) {
  return (
    <article>
      <h2>React Fundamentals</h2>

      {available && (
        <button>Start Course</button>
      )}
    </article>
  );
}

Props Help Create Reusable Components

A reusable component should generally avoid hardcoding information that needs to change.

Instead of:

function UserCard() {
  return (
    <div>
      <h2>Alex</h2>
      <p>Frontend Developer</p>
    </div>
  );
}

use props:

function UserCard({ name, role }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{role}</p>
    </div>
  );
}

Now:

<UserCard
  name="Alex"
  role="Frontend Developer"
/>

<UserCard
  name="Sarah"
  role="UI Designer"
/>

<UserCard
  name="David"
  role="Backend Developer"
/>

One component can represent multiple users.

Props Are Read-Only

Props should be treated as read-only by the receiving component.

For example:

function UserCard({ name }) {
  return <h2>{name}</h2>;
}

The child should not try to directly change the name prop.

Props represent information provided by the parent.

If the child needs to request a change, the parent can provide a function through props.

For example:

function Parent() {
  function handleChange() {
    console.log("Change requested");
  }

  return (
    <Child onChange={handleChange} />
  );
}

The child can call the function:

function Child({ onChange }) {
  return (
    <button onClick={onChange}>
      Change
    </button>
  );
}

This maintains a predictable data flow.

Props and One-Way Data Flow

React generally follows a one-way data flow.

Data normally moves from parent components to child components.

Parent
   ↓
Props
   ↓
Child

For example:

function App() {
  const username = "Alex";

  return (
    <Profile username={username} />
  );
}

Then:

function Profile({ username }) {
  return <h2>{username}</h2>;
}

The value originates in the parent and moves downward.

If a child needs to communicate an event back to its parent, the parent can provide a callback function.

Data:
Parent → Child

Event:
Child → Parent callback

This pattern is fundamental to React.

Props Do Not Automatically Change

A prop value can change when the parent renders the child with a different value.

For example:

function App() {
  const [progress, setProgress] = useState(50);

  return (
    <CourseCard progress={progress} />
  );
}

If the parent updates:

setProgress(75);

the child receives the updated prop:

50 → 75

The child itself doesn’t directly modify the prop.

The parent owns the value and passes the current value down.

Props Can Control What a Component Renders

Props can be used to determine what a component displays.

For example:

function Status({ completed }) {
  return (
    <p>
      {completed
        ? "Completed"
        : "Not completed"}
    </p>
  );
}

Usage:

<Status completed={true} />

Result:

Completed

Another instance:

<Status completed={false} />

Result:

Not completed

The component structure stays the same while the prop controls the result.

Props Can Control Styling

Props can also be used to customize styling.

For example:

function Button({ variant, children }) {
  return (
    <button className={`button ${variant}`}>
      {children}
    </button>
  );
}

Usage:

<Button variant="primary">
  Start Learning
</Button>

Another:

<Button variant="secondary">
  View Details
</Button>

The component remains the same while the prop controls the variation.

Props Can Be Used with Components

Props don’t have to contain only simple values.

You can pass another component through a prop.

For example:

function Layout({ sidebar }) {
  return (
    <div>
      {sidebar}
    </div>
  );
}

Then:

<Layout sidebar={<Sidebar />} />

The Sidebar component is passed as a value.

This pattern can be useful for flexible layouts and composition.

Props Can Contain JSX

You can pass JSX as a prop.

For example:

function Alert({ message }) {
  return (
    <div className="alert">
      {message}
    </div>
  );
}

Then:

<Alert
  message={<strong>Course completed!</strong>}
/>

The prop contains JSX rather than a simple string.

However, for general nested content, the children prop is often a more natural pattern.

Props and Component Reusability

Props are closely connected to reusable components.

Consider a reusable ProductCard:

function ProductCard({
  name,
  price,
  image
}) {
  return (
    <article>
      <img src={image} alt={name} />
      <h2>{name}</h2>
      <p>${price}</p>
    </article>
  );
}

You can reuse it:

<ProductCard
  name="Laptop"
  price={799}
  image="/laptop.jpg"
/>

<ProductCard
  name="Keyboard"
  price={99}
  image="/keyboard.jpg"
/>

The component defines the structure.

Props provide the changing information.

This separation is one of the most important patterns in React.

A Practical Learning Platform Example

Imagine you are building a course platform.

You create a reusable CourseCard:

function CourseCard({
  title,
  instructor,
  level,
  progress
}) {
  return (
    <article className="course-card">
      <h2>{title}</h2>

      <p>
        Instructor: {instructor}
      </p>

      <p>
        Level: {level}
      </p>

      <p>
        Progress: {progress}%
      </p>
    </article>
  );
}

Now the parent can provide different course information:

function CourseList() {
  return (
    <section>
      <CourseCard
        title="React Fundamentals"
        instructor="Alex"
        level="Beginner"
        progress={75}
      />

      <CourseCard
        title="JavaScript Essentials"
        instructor="Sarah"
        level="Intermediate"
        progress={45}
      />

      <CourseCard
        title="Advanced React"
        instructor="David"
        level="Advanced"
        progress={20}
      />
    </section>
  );
}

The component tree looks like:

CourseList
├── CourseCard
├── CourseCard
└── CourseCard

The structure is shared.

The data is different.

Props vs Hardcoded Values

Hardcoded Component

function CourseCard() {
  return (
    <article>
      <h2>React Fundamentals</h2>
      <p>Alex</p>
    </article>
  );
}

This component is tied to specific information.

Component Using Props

function CourseCard({ title, instructor }) {
  return (
    <article>
      <h2>{title}</h2>
      <p>{instructor}</p>
    </article>
  );
}

Now:

<CourseCard
  title="React Fundamentals"
  instructor="Alex"
/>

<CourseCard
  title="JavaScript Essentials"
  instructor="Sarah"
/>

The second approach is more flexible because the changing information comes from outside the component.

Important Things to Remember About Props

When working with props, remember these points:

• Props are short for properties.
• Props allow components to receive information.
• Props are commonly passed from parent to child.
• Props can contain different JavaScript values.
• Props help make components reusable.
• Props should be treated as read-only by the receiving component.
• Props can control what a component displays.
• Props can control component variations and behavior.
• Props can contain functions.
• Props can contain objects and arrays.
• Props can contain JSX.
• The children prop is a special way to receive nested content.
• A parent can provide callbacks through props for child-triggered events.
• Props and state serve different purposes.

Common Beginner Mistakes

Forgetting Curly Braces for JavaScript Values

Incorrect:

<CourseCard progress="75" />

if the component expects a number.

Correct:

<CourseCard progress={75} />

Trying to Change Props Directly

Avoid treating props as values that the child owns and can directly modify.

Use state or callbacks where appropriate.

Hardcoding Everything

If a component needs to display different information, consider whether that information should be passed as props.

Passing Props the Child Doesn’t Need

Only pass information that the child actually uses.

Confusing Props with State

Props come from outside the component.

State is managed by the component or another appropriate state owner.

Props Mental Model

Think of props like information placed into a component when you use it.

<CourseCard
  title="React"
  level="Beginner"
/>

Conceptually:

CourseCard
   ↑
   │
 title = "React"
 level = "Beginner"

The component receives those values and uses them:

function CourseCard({ title, level }) {
  return (
    <article>
      <h2>{title}</h2>
      <p>{level}</p>
    </article>
  );
}

A useful mental model is:

Props = Input to a Component

Just like a JavaScript function can receive arguments:

function add(a, b) {
  return a + b;
}

a React component can receive props:

function CourseCard({ title }) {
  return <h2>{title}</h2>;
}

The values come from the component’s parent.

Props Cheat Sheet

Concept	Meaning
Props	Information passed into a component
Full form	Properties
Direction	Usually parent → child
Purpose	Pass data and configuration
String prop	title="React"
Number prop	progress={75}
Boolean prop	available={true}
Function prop	onClick={handleClick}
Object prop	course={course}
Array prop	courses={courses}
JSX prop	content={<Course />}
children	Nested content passed to a component
Mutability	Props should be treated as read-only

The simplest way to remember props is:

Parent
   ↓
Props
   ↓
Child

And for reusable components:

Component
   +
Props
   ↓
Reusable UI

Key Takeaways

• Props means properties.
• Props allow one component to pass information to another.
• Props are most commonly passed from a parent component to a child component.
• Props can contain strings, numbers, booleans, objects, arrays, functions, JSX, and other values.
• Props make components dynamic and reusable.
• The receiving component should treat props as read-only.
• Props can control what a component displays and how it behaves.
• Callback functions can be passed as props to allow child-triggered events.
• The children prop provides a convenient way to pass nested content.
• Props are different from state.
• Props represent information supplied to a component, while state represents data managed within a component or its state owner.
• Understanding props is essential before learning advanced React patterns.

The core idea to remember is:

Props are inputs that allow React components to receive data and become flexible and reusable.