Introduction to Props in React

Course: React JS Training

Topic: Introduction to Props (Properties) in React

Learning Objective: Understand what props are, why they are used, how to pass data between components, and how to create reusable React components using props.

1. What Are Props in React?

Props stands for Properties. Props are used to pass data from a parent component to a child component in React. They allow components to receive information and display different content based on the values they receive.

Props work similarly to function arguments in JavaScript. A parent component passes values to a child component, and the child uses those values to render its UI.

Example:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}
function App() {
  return <Greeting name="Rahul" />;
}
export default App;

Output:

Hello, Rahul!

Explanation: The App component passes the value "Rahul" through the name prop. The Greeting component receives that value through its props parameter and displays it.

2. Why Are Props Important?

Props make React components flexible, reusable, and easier to maintain. Instead of creating separate components for different data, developers can create one component and customize it with different props.

• Data sharing: Pass information from parent components to child components.
• Reusability: Use the same component with different values.
• Customization: Change text, images, colors, prices, and other displayed content.
• Maintainability: Reduce duplicated code and simplify updates.
• Component composition: Build complex interfaces from smaller components.

Example of Reusability

function Student(props) {
  return <h2>Student Name: {props.name}</h2>;
}
function App() {
  return (
    <div>
      <Student name="Amit" />
      <Student name="Priya" />
      <Student name="Neha" />
    </div>
  );
}
export default App;

Output:

Student Name: Amit
Student Name: Priya
Student Name: Neha

Explanation: The same Student component is reused three times with different values for the name prop.

3. How Props Work in React

Props follow a parent-to-child data flow. The parent component supplies values, React passes those values to the child component, and the child uses them to render its content.

Basic Flow

Parent Component
       |
       | Passes props
       v
Child Component
       |
       | Uses prop values
       v
Rendered UI

For example, a product page can pass a product name, price, and image URL to a reusable ProductCard component.

4. Passing Props to a Component

Props are passed to a React component using JSX attributes. String values can be placed inside quotation marks, while numbers, Boolean values, variables, arrays, objects, and other JavaScript expressions are generally passed inside curly braces.

Example 1: Passing a String

function Welcome(props) {
  return <h1>Welcome, {props.name}!</h1>;
}
function App() {
  return <Welcome name="Manish" />;
}

Example 2: Passing a Number

function Age(props) {
  return <p>Age: {props.value}</p>;
}
function App() {
  return <Age value={25} />;
}

Example 3: Passing a Boolean

function Status(props) {
  return <p>Active: {props.isActive ? "Yes" : "No"}</p>;
}
function App() {
  return <Status isActive={true} />;
}

Example 4: Passing a Variable

function App() {
  const studentName = "Amit";
  return <Greeting name={studentName} />;
}
function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>;
}

Important: Use name="Amit" for a literal string and name={studentName} when passing a JavaScript variable.

5. Accessing Props in a Component

A functional component receives props as its first argument. You can access individual values using dot notation or destructure the properties directly in the function parameter.

Method 1: Using the Props Object

function Employee(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Department: {props.department}</p>
    </div>
  );
}
function App() {
  return (
    <Employee name="Riya" department="Development" />
  );
}

Method 2: Using Destructuring

function Employee({ name, department }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Department: {department}</p>
    </div>
  );
}

Explanation: Both methods access the same prop values. Destructuring is often preferred because it makes the component code shorter and easier to read.

6. Types of Values That Can Be Passed as Props

React props can carry many types of JavaScript values, not just strings.

Example: Passing an Object

function UserProfile({ user }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}
function App() {
  const userData = {
    name: "Amit Sharma",
    email: "[email protected]"
  };
  return <UserProfile user={userData} />;
}

Example: Passing an Array

function CourseList({ courses }) {
  return (
    <ul>
      {courses.map((course) => (
        <li key={course}>{course}</li>
      ))}
    </ul>
  );
}
function App() {
  const courses = ["React", "JavaScript", "CSS"];
  return <CourseList courses={courses} />;
}

7. Props Are Read-Only

Props are read-only inputs. A child component should not directly change the values it receives from its parent. If the information needs to change, the parent should provide updated props, usually by updating its state.

Incorrect Example

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

Why is this incorrect? The component is trying to modify a prop instead of treating it as read-only input. Changing a local variable also does not update the parent's data or reliably manage React UI updates.

Correct Example

function DisplayCount({ count }) {
  return <p>Count: {count}</p>;
}
function App() {
  return <DisplayCount count={5} />;
}

When interactive data needs to change, use React state in the appropriate component and pass the resulting value and any required callback functions as props.

8. Default Values for Props

You can provide default values through JavaScript parameter destructuring. The default is used when the prop is missing or explicitly set to undefined.

function Greeting({ name = "Guest" }) {
  return <h2>Hello, {name}!</h2>;
}
function App() {
  return (
    <div>
      <Greeting name="Amit" />
      <Greeting />
    </div>
  );
}

Output:

Hello, Amit!
Hello, Guest!

Note: A default parameter does not replace values such as null, false, or 0; it applies when the value is undefined.

9. The Special Children Prop

When you place content between a component's opening and closing tags, React passes that content to the component through a special prop named children. This is useful for reusable cards, panels, layouts, and wrappers.

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}
function App() {
  return (
    <Card>
      <h2>React JS</h2>
      <p>Learn reusable UI components.</p>
    </Card>
  );
}

Explanation: The heading and paragraph become the children prop. The Card component can wrap different content without needing to know its exact structure.

10. Passing Functions as Props

Props can pass functions from a parent to a child. This is a common way for a child component to notify its parent when a user performs an action.

function Button({ onPress }) {
  return <button onClick={onPress}>Click Me</button>;
}
function App() {
  function handleClick() {
    alert("Button clicked!");
  }
  return <Button onPress={handleClick} />;
}

Explanation: The parent defines handleClick and passes it as a prop named onPress. The child calls it when the button is clicked. Notice that onPress={handleClick} passes the function; it does not call the function immediately.

11. Passing Props with the Spread Operator

JavaScript's JSX spread syntax can forward multiple props to another component. Use it when forwarding props is appropriate, but avoid it when explicitly listing props would make the code easier to understand.

function UserCard({ name, role }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{role}</p>
    </div>
  );
}
function App() {
  const user = {
    name: "Priya",
    role: "Frontend Developer"
  };
  return <UserCard {...user} />;
}

Explanation: The spread syntax passes the object's name and role properties as individual props to UserCard.

12. Props vs. State

Props and state both affect what a React component displays, but they serve different purposes.

Remember: Props are inputs; state is data a component manages over time. A parent can use state to supply changing prop values to a child.

13. Practical Example: Reusable Product Cards

This example demonstrates how props help create reusable product cards for an online shopping website.

App.jsx

function ProductCard({ name, price, inStock }) {
  return (
    <div className="product-card">
      <h2>{name}</h2>
      <p>Price: ₹{price}</p>
      <p>{inStock ? "In Stock" : "Out of Stock"}</p>
    </div>
  );
}
export default function App() {
  return (
    <div>
      <ProductCard name="Keyboard" price={1200} inStock={true} />
      <ProductCard name="Mouse" price={600} inStock={false} />
      <ProductCard name="Monitor" price={8500} inStock={true} />
    </div>
  );
}

Explanation

• ProductCard is a reusable component.
• name receives the product name.
• price receives a numeric price.
• inStock receives a Boolean value.
• The conditional expression displays the correct availability message.
• Each product can have different information without duplicating the component's structure.

14. Common Mistakes When Using Props

15. Best Practices for Using Props

• Use clear, meaningful prop names such as userName, productPrice, and isAvailable.
• Use destructuring when it improves readability.
• Provide sensible default values for optional props.
• Keep components focused and reusable.
• Treat props as read-only.
• Use Boolean props for true/false conditions.
• Use children for flexible wrapper components.
• Pass callbacks when child components need to request an action from a parent.
• For complex data, pass well-structured objects instead of many unrelated values when appropriate.
• Remember that props can change between renders when the parent supplies new values.

16. Interview Questions and Answers

Q1. What are props in React?

Answer: Props, short for properties, are read-only inputs that allow a parent component to pass data to a child component.

Q2. Why do we use props?

Answer: Props make components reusable and customizable, allow data to flow from parent to child, and reduce duplicated code.

Q3. Can props be modified by a child component?

Answer: No. A component should treat its props as read-only. The parent can provide new values when its data changes.

Q4. What is prop destructuring?

Answer: Destructuring extracts individual properties from the props object directly in the component's parameter list, for example function User({ name }).

Q5. Can we pass functions as props?

Answer: Yes. Functions are often passed as callbacks so child components can request actions from their parents.

Q6. What is the children prop?

Answer: The children prop contains the JSX or other content nested between a component's opening and closing tags.

Q7. What is the difference between props and state?

Answer: Props are inputs supplied by a parent, while state is data managed by a component or Hook. Both can influence rendering.

Q8. Can props contain objects and arrays?

Answer: Yes. Props can carry strings, numbers, Boolean values, objects, arrays, functions, and JSX elements.

Q9. How do you set a default prop value in a function component?

Answer: Use a default value in parameter destructuring, such as function Greeting({ name = "Guest" }).

Q10. What is prop drilling?

Answer: Prop drilling occurs when data is passed through several intermediate components that may not use it themselves, simply to reach a deeply nested child. Context or other suitable state-sharing approaches can help when this becomes inconvenient.

17. Practice Exercises

1. Create a Student component that accepts name, age, and course props.
2. Create a reusable Button component that accepts a label prop.
3. Create a ProductCard component that accepts product name, price, and availability.
4. Create a Greeting component with a default name of "Guest".
5. Create a Card component that displays nested content using the children prop.
6. Create a parent component that passes a callback function to a child button.

18. Quick Revision Checklist

• Props stands for Properties.
• Props pass information from parent components to child components.
• Props can contain different JavaScript value types.
• Props can be accessed through the props object or destructuring.
• Props are read-only inputs.
• Default values can be provided with parameter destructuring.
• The children prop receives nested content.
• Functions can be passed as props to communicate actions.
• Props and state are different concepts, although both can affect rendering.
• Reusable components can render different UI based on the props they receive.

19. Official Documentation and Course Links

Read the official React documentation for a deeper understanding of props:

• React Official Documentation – Passing Props to a Component
• React Official Documentation – Describing the UI

Explore the React JS training course and register for a course demo:

• JustAcademy React JS Training Course
• Register for React JS Course Demo

20. Conclusion

Props are one of the fundamental concepts in React. They allow parent components to pass data and callbacks to child components, making interfaces easier to reuse, customize, and maintain. By learning how to pass, access, and use props correctly—and by remembering that props are read-only—you can build more organized React applications.