React Multiple Props - web4learners.com

A React component can receive multiple props at the same time. Passing multiple props allows a parent component to provide all the information a child component needs to display dynamic and reusable content.

For example, a course card may need a title, level, duration, number of lessons, and progress percentage.

Instead of creating a separate component for every course, you can create one reusable component and provide different values through multiple props.

Parent Component
       │
       ├── title
       ├── level
       ├── duration
       ├── lessons
       └── progress
              ↓
        CourseCard
              ↓
         Dynamic UI

What Are Multiple Props?

Multiple props simply means passing more than one property to a component.

For example:

function App() {
  return (
    <Course
      title="React"
      level="Beginner"
      duration="8 Weeks"
    />
  );
}

This component receives three props:

title
level
duration

The child component can read each prop:

function Course(props) {
  return (
    <div>
      <h2>{props.title}</h2>
      <p>Level: {props.level}</p>
      <p>Duration: {props.duration}</p>
    </div>
  );
}

The browser displays:

React
Level: Beginner
Duration: 8 Weeks

Each prop provides a different piece of information to the same component.

Why Use Multiple Props?

A component often needs more than one value to create its UI.

Consider a tutorial card. It might need:

Tutorial title
Category
Difficulty
Reading time
Author
Number of lessons
Completion status

Passing these values as props allows one component to handle many different pieces of content.

For example:

<TutorialCard
  title="React Props"
  category="React"
  difficulty="Beginner"
  duration="10 minutes"
/>

The component can use these values to create a complete tutorial card.

Without props, you would have to hardcode the information inside the component, which makes reuse much harder.

Passing Multiple String Props

You can pass several string values directly to a component.

function App() {
  return (
    <Profile
      name="Karimulla"
      role="Frontend Developer"
      city="Hyderabad"
    />
  );
}

The child reads those values:

function Profile(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.role}</p>
      <p>{props.city}</p>
    </div>
  );
}

Multiple string props are useful for information such as:

Names
Titles
Categories
Labels
Locations
Descriptions

Passing Different Data Types

Multiple props don’t have to contain the same type of data.

A component can receive strings, numbers, and booleans at the same time.

function App() {
  return (
    <Course
      title="React"
      lessons={40}
      progress={75}
      available={true}
    />
  );
}

Here is what each prop contains:

Prop	Value	Type
`title`	`"React"`	String
`lessons`	`40`	Number
`progress`	`75`	Number
`available`	`true`	Boolean

The child can read all of them:

function Course(props) {
  return (
    <div>
      <h2>{props.title}</h2>
      <p>Lessons: {props.lessons}</p>
      <p>Progress: {props.progress}%</p>
      <p>
        {props.available ? "Available" : "Unavailable"}
      </p>
    </div>
  );
}

This demonstrates that one component can receive different types of data through multiple props.

Passing Multiple Props with Destructuring

When a component receives several props, destructuring can make the code cleaner.

Instead of:

function Course(props) {
  return (
    <div>
      <h2>{props.title}</h2>
      <p>{props.level}</p>
      <p>{props.duration}</p>
    </div>
  );
}

you can write:

function Course({ title, level, duration }) {
  return (
    <div>
      <h2>{title}</h2>
      <p>{level}</p>
      <p>{duration}</p>
    </div>
  );
}

The result is the same.

The difference is simply how the component accesses its props.

Destructuring also makes the component’s expected inputs easy to identify.

Passing Props from Variables

Multiple props can come from JavaScript variables instead of hardcoded values.

function App() {
  const title = "React";
  const level = "Beginner";
  const lessons = 40;
  const progress = 75;

  return (
    <Course
      title={title}
      level={level}
      lessons={lessons}
      progress={progress}
    />
  );
}

The child receives those values:

function Course({
  title,
  level,
  lessons,
  progress
}) {
  return (
    <div>
      <h2>{title}</h2>
      <p>Level: {level}</p>
      <p>Lessons: {lessons}</p>
      <p>Progress: {progress}%</p>
    </div>
  );
}

This approach becomes especially useful when values come from:

React state
API responses
Forms
Databases
User interactions
Calculations

Passing Props from an Object

When several values belong to the same entity, you can store them in an object.

function App() {
  const course = {
    title: "React",
    level: "Beginner",
    lessons: 40,
    progress: 75
  };

  return (
    <Course
      title={course.title}
      level={course.level}
      lessons={course.lessons}
      progress={course.progress}
    />
  );
}

Another option is to pass the entire object as one prop:

function App() {
  const course = {
    title: "React",
    level: "Beginner",
    lessons: 40,
    progress: 75
  };

  return <Course course={course} />;
}

The child can read the object:

function Course({ course }) {
  return (
    <div>
      <h2>{course.title}</h2>
      <p>Level: {course.level}</p>
      <p>Lessons: {course.lessons}</p>
      <p>Progress: {course.progress}%</p>
    </div>
  );
}

Both approaches are valid.

The choice depends on how the component is designed and how naturally the data belongs together.

Multiple Props vs One Object Prop

Consider these two approaches.

Separate Props

<Course
  title="React"
  level="Beginner"
  lessons={40}
  progress={75}
/>

One Object Prop

<Course
  course={{
    title: "React",
    level: "Beginner",
    lessons: 40,
    progress: 75
  }}
/>

Neither approach is automatically correct for every situation.

Separate props make individual inputs explicit:

Course
├── title
├── level
├── lessons
└── progress

An object prop groups related information:

Course
└── course
     ├── title
     ├── level
     ├── lessons
     └── progress

Choose the structure that makes the component easiest to understand and use.

Passing Multiple Boolean Props

A component can receive multiple boolean props.

For example:

<Course
  available
  featured={true}
  completed={false}
/>

The component can read those values:

function Course({
  available,
  featured,
  completed
}) {
  return (
    <div>
      {featured && <span>Featured</span>}

      <h2>React Course</h2>

      <p>
        {available ? "Available" : "Unavailable"}
      </p>

      {completed && <p>Completed</p>}
    </div>
  );
}

Boolean props are useful for controlling simple variations in a component.

Passing Multiple Props to Multiple Components

A parent can pass different sets of props to different child components.

function App() {
  return (
    <main>
      <Header
        title="Web4Learners"
        theme="dark"
      />

      <Course
        title="React"
        level="Beginner"
        lessons={40}
      />

      <Profile
        name="Karimulla"
        role="Frontend Developer"
      />
    </main>
  );
}

Each component receives the information it needs.

The structure can be visualized as:

App
│
├── Header
│    ├── title
│    └── theme
│
├── Course
│    ├── title
│    ├── level
│    └── lessons
│
└── Profile
     ├── name
     └── role

This keeps data flow organized within the component tree.

Passing the Same Prop to Different Components

Sometimes multiple components need the same piece of information.

For example:

function App() {
  const userName = "Karimulla";

  return (
    <>
      <Header userName={userName} />
      <Profile userName={userName} />
      <Sidebar userName={userName} />
    </>
  );
}

Each child receives the same value from the parent.

This can be useful when different parts of the interface need the same parent-owned information.

If the same information needs to travel through many unrelated component levels, patterns such as React Context may become useful. You will learn about those patterns later.

Passing Multiple Props to Reusable Cards

Multiple props are especially useful for reusable UI components.

Consider a tutorial card:

function TutorialCard({
  title,
  category,
  difficulty,
  duration
}) {
  return (
    <article className="tutorial-card">
      <span>{category}</span>

      <h2>{title}</h2>

      <p>Difficulty: {difficulty}</p>

      <p>Duration: {duration}</p>
    </article>
  );
}

You can create several cards using the same component:

function App() {
  return (
    <div>
      <TutorialCard
        title="React Props"
        category="React"
        difficulty="Beginner"
        duration="10 minutes"
      />

      <TutorialCard
        title="React State"
        category="React"
        difficulty="Intermediate"
        duration="15 minutes"
      />

      <TutorialCard
        title="JavaScript Arrays"
        category="JavaScript"
        difficulty="Beginner"
        duration="12 minutes"
      />
    </div>
  );
}

The component structure stays the same.

Only the values change.

This is the foundation of reusable data-driven interfaces.

Using Multiple Props in Calculations

Multiple props can be used together in calculations.

For example:

function Price({ price, quantity }) {
  const total = price * quantity;

  return <p>Total: ${total}</p>;
}

The parent provides both values:

<Price
  price={25}
  quantity={3}
/>

The component calculates:

25 × 3 = 75

and displays:

Total: $75

This shows that props can act as inputs to a component’s JavaScript logic, not just as values displayed in JSX.

Using Multiple Props with Conditional Rendering

Multiple props can work together to determine what a component displays.

For example:

function Course({
  available,
  progress
}) {
  return (
    <div>
      <h2>React</h2>

      {available && (
        <p>Course is available.</p>
      )}

      {progress === 100 && (
        <p>Course completed!</p>
      )}
    </div>
  );
}

The parent can provide:

<Course
  available={true}
  progress={100}
/>

The component uses both values to determine the rendered UI.

Keeping Multiple Props Organized

When a component receives several props, formatting them across multiple lines improves readability.

Instead of:

<Course title="React" level="Beginner" lessons={40} progress={75} available={true} />

you can write:

<Course
  title="React"
  level="Beginner"
  lessons={40}
  progress={75}
  available={true}
/>

This makes individual props easier to read and modify.

For components with many props, good formatting becomes increasingly important.

Avoiding Unnecessary Props

Multiple props are useful, but you shouldn’t pass every piece of available data to every component.

Suppose a component only needs a course title and level:

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

There is no need to pass unrelated information:

<Course
  title="React"
  level="Beginner"
  userEmail={userEmail}
  theme={theme}
  notifications={notifications}
  accountSettings={accountSettings}
/>

unless the component actually needs those values.

Passing unnecessary props can make a component harder to understand and maintain.

Multiple Props and Component Responsibility

Props should generally relate to what the component is responsible for displaying or controlling.

A ProfileCard might reasonably receive:

<ProfileCard
  name="Karimulla"
  role="Frontend Developer"
  location="Hyderabad"
/>

A CourseCard might receive:

<CourseCard
  title="React"
  level="Beginner"
  lessons={40}
  progress={75}
/>

Keeping props related to the component’s responsibility makes the component easier to understand and reuse.

Common Mistakes with Multiple Props

Forgetting Curly Braces for Numbers

If lessons is intended to be a number, don’t pass it as a string:

<Course lessons="40" />

Instead:

<Course lessons={40} />

The first passes a string, while the second passes a number.

Using the Wrong Prop Name

If the parent passes:

<Course courseName="React" />

the child needs to read courseName:

function Course({ courseName }) {
  return <h2>{courseName}</h2>;
}

If the child expects title instead, it won’t receive a value through that prop name.

Passing Too Much Data

Don’t pass large amounts of unrelated information simply because it is available in the parent.

Pass what the child actually needs.

Creating Too Many Unrelated Props

A component with many unrelated props can become difficult to understand.

For example, if one component is responsible for a profile, course, shopping cart, and navigation system at the same time, the problem may not be the number of props. The component itself may have too many responsibilities.

In such cases, consider:

Splitting the component.
Grouping naturally related data.
Using composition.
Creating smaller focused components.

The goal isn’t to minimize the number of props at all costs. The goal is to create a clear component interface.

Best Practices for Multiple Props

Use descriptive prop names.
Pass only the values a component actually needs.
Use curly braces for JavaScript values.
Use the correct data type.
Keep related props together.
Use destructuring when it improves readability.
Format long JSX elements across multiple lines.
Use objects when several values naturally represent one entity.
Use arrays for collections of related data.
Use boolean props for simple true/false variations.
Avoid passing unrelated data.
Keep component APIs easy to understand.
Don’t create separate components just because different instances have different prop values.

Multiple Props in a Component Tree

Multiple props become especially useful when working with a component tree.

Consider this structure:

App
│
└── Dashboard
      │
      ├── Header
      │
      ├── CourseCard
      │     ├── title
      │     ├── level
      │     └── progress
      │
      └── ProfileCard
            ├── name
            ├── role
            └── location

The parent component can provide the appropriate information to each child.

This creates a predictable flow of data through the application.

Web4Learners Practical Example

Imagine Web4Learners has a homepage showing different learning resources.

You could create a reusable ResourceCard component:

function ResourceCard({
  title,
  category,
  difficulty,
  duration,
  lessons
}) {
  return (
    <article className="resource-card">
      <span>{category}</span>

      <h2>{title}</h2>

      <p>Difficulty: {difficulty}</p>

      <p>Duration: {duration}</p>

      <p>Lessons: {lessons}</p>
    </article>
  );
}

The parent can provide different values:

function App() {
  return (
    <main>
      <ResourceCard
        title="React Tutorial"
        category="React"
        difficulty="Beginner"
        duration="2 Hours"
        lessons={20}
      />

      <ResourceCard
        title="JavaScript Tutorial"
        category="JavaScript"
        difficulty="Intermediate"
        duration="4 Hours"
        lessons={35}
      />

      <ResourceCard
        title="CSS Tutorial"
        category="CSS"
        difficulty="Beginner"
        duration="3 Hours"
        lessons={25}
      />
    </main>
  );
}

The ResourceCard component doesn’t need to know which tutorial it is displaying.

It simply receives props and uses them to create the UI.

The flow is:

Parent
  ↓
Provides Data
  ↓
ResourceCard
  ↓
Reads Props
  ↓
Displays UI

This separation between data and UI structure is one of the most useful patterns in React.

Image Placement

Place the image immediately after the section “What Are Multiple Props?”

Create a modern 16:9 Web4Learners-style React infographic showing one parent component passing several props into a reusable child component.

Show App on the left and CourseCard on the right. Between them, show:

title="React"
level="Beginner"
lessons={40}
progress={75}

Use arrows to clearly show the parent-to-child data flow. Keep the visual clean, modern, and developer-focused with minimal text.

Caption: Passing multiple values from a parent component to a reusable React component.

Alt text: React component receiving multiple props from a parent component.

Practice Exercise

Create a reusable ProductCard component.

The parent should pass:

name
price
category
rating
available

Start with:

function App() {
  return (
    <ProductCard
      name="Wireless Keyboard"
      price={49}
      category="Accessories"
      rating={4.5}
      available={true}
    />
  );
}

Create the ProductCard component and:

Display the product name.
Display the price.
Display the category.
Display the rating.
Display "Available" when available is true.
Display "Out of Stock" when available is false.
Create two additional product cards with different values.
Rewrite the component using props destructuring.

Multiple Props Cheat Sheet

Task	Example
Multiple strings	`title="React" level="Beginner"`
Number prop	`lessons={40}`
Boolean prop	`available={true}`
Boolean shorthand	`available`
Variable prop	`title={courseTitle}`
Object prop	`course={course}`
Array prop	`topics={topics}`
Function prop	`onClick={handleClick}`
Read props object	`props.title`
Destructure props	`function Course({ title, level })`
Multiple component instances	`<Course ... />`
Conditional prop usage	`{available && <p>Available</p>}`

Key Takeaways

A React component can receive multiple props at the same time.
Each prop can represent a different piece of information.
Multiple props make reusable components dynamic.
Props can contain different JavaScript data types.
Numbers, booleans, variables, arrays, and objects use curly braces in JSX.
Multiple props can be accessed through the props object or destructuring.
Related data can sometimes be grouped into an object prop.
Multiple props can control content, styling, calculations, and conditional rendering.
The same component can receive completely different prop values in different instances.
You should pass only the data a component actually needs.
Clear prop names make components easier to understand and maintain.
Designing a clear component API is an important part of building reusable React applications.

What Are Multiple Props?

Why Use Multiple Props?

Passing Multiple String Props

Passing Different Data Types

Passing Multiple Props with Destructuring

Passing Props from Variables

Passing Props from an Object

Multiple Props vs One Object Prop

Separate Props

One Object Prop

Passing Multiple Boolean Props

Passing Multiple Props to Multiple Components

Passing the Same Prop to Different Components

Passing Multiple Props to Reusable Cards

Using Multiple Props in Calculations

Using Multiple Props with Conditional Rendering

Keeping Multiple Props Organized

Avoiding Unnecessary Props

Multiple Props and Component Responsibility

Common Mistakes with Multiple Props

Forgetting Curly Braces for Numbers

Using the Wrong Prop Name

Passing Too Much Data

Creating Too Many Unrelated Props

Best Practices for Multiple Props

Multiple Props in a Component Tree

Web4Learners Practical Example

Image Placement

Practice Exercise

Multiple Props Cheat Sheet

Key Takeaways

Leave a Comment Cancel reply