How to Pass Multiple Props in React: Simple Guide

In React, you pass multiple props to a component by listing them as attributes inside the component tag, like <Component prop1={value1} prop2={value2} />. Each prop is a key-value pair that the child component can access via its parameters.

Syntax

To pass multiple props, write each prop as an attribute inside the component tag. Each prop has a name (key) and a value. The child component receives these props as an object.

• propName: The name of the prop you want to pass.
• {value}: The value assigned to the prop, usually inside curly braces for JavaScript expressions.

jsx

function Child({ name, age }) {
  return <p>{name} is {age} years old.</p>;
}

function Parent() {
  return <Child name="Alice" age={30} />;
}

Output

Alice is 30 years old.

Example

This example shows a parent component passing three props to a child component. The child uses these props to display a message.

jsx

import React from 'react';

function UserInfo({ firstName, lastName, city }) {
  return (
    <div>
      <h2>User Info</h2>
      <p>Name: {firstName} {lastName}</p>
      <p>City: {city}</p>
    </div>
  );
}

export default function App() {
  return (
    <UserInfo firstName="John" lastName="Doe" city="New York" />
  );
}

Output

User Info
Name: John Doe
City: New York

Common Pitfalls

Common mistakes when passing multiple props include:

• Forgetting to wrap JavaScript values in curly braces, which causes them to be treated as strings.
• Passing props with the wrong names that the child component does not expect.
• Trying to pass an object or array without proper syntax.

Always check that prop names match and values are correctly formatted.

jsx

/* Wrong way: value treated as string */
<UserInfo age="30" />

/* Right way: value inside curly braces */
<UserInfo age={30} />

Quick Reference

Tips for passing multiple props:

• Use {} for JavaScript values like numbers, variables, or expressions.
• Use quotes for string literals.
• Props are passed as key-value pairs inside the component tag.
• Destructure props in the child component for easy access.

Key Takeaways

Pass multiple props by listing them as attributes inside the component tag.

Wrap JavaScript values in curly braces to pass them correctly.

Ensure prop names match between parent and child components.

Destructure props in the child component for cleaner code.

Avoid passing props without proper syntax to prevent bugs.