Passing and Validating Props

📦 Passing and Validating Props in React

In React, props are the secret sauce that make components reusable and dynamic. Whether you're creating a reusable button or a profile card, props let you customize how components behave and what they display — just like parameters in a function.

In this guide, we’ll cover how to pass props between components and ensure they’re valid using PropTypes, so your components are more robust and easier to debug.

📤 What Are Props?

Props (short for "properties") are read-only objects that let you pass data from a parent component to a child component.

const Welcome = ({ name }) => {
  return <h2>Hello, {name}!</h2>;
};

<Welcome name="Aditya" />

Here, name is a prop passed from the parent component to the Welcome component. It helps customize the output dynamically.

🔁 Passing Multiple Props

You can pass multiple props to any component, like so:

const UserCard = ({ name, age, location }) => {
  return (
    <div>
      <h3>{name}</h3>
      <p>Age: {age}</p>
      <p>Location: {location}</p>
    </div>
  );
};

<UserCard name="Aditya" age={25} location="Jaipur" />

You can pass strings, numbers, arrays, objects, functions — anything you need to make your component flexible and powerful.

🧱 Props Are Immutable

One important rule: props are read-only. You should never try to modify them inside the child component.

// ❌ Don’t do this
props.name = "New Name"; // Not allowed

If you need to modify data, consider using state or passing a function as a prop to handle updates.

✅ Validating Props with PropTypes

To catch bugs early, you can validate prop types using the prop-types package. This ensures that your components receive the correct data types.

📦 Step 1: Install PropTypes

npm install prop-types

🔍 Step 2: Define PropTypes in Your Component

import PropTypes from 'prop-types';

const UserCard = ({ name, age }) => {
  return (
    <div>
      <h3>{name}</h3>
      <p>Age: {age}</p>
    </div>
  );
};

UserCard.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number
};

Now, if someone passes the wrong type (like a number instead of a string for name), React will show a warning in the console.

🛡️ Common PropTypes Validations

MyComponent.propTypes = {
  title: PropTypes.string,
  isLoggedIn: PropTypes.bool,
  items: PropTypes.array,
  user: PropTypes.object,
  onClick: PropTypes.func,
  age: PropTypes.number.isRequired,
};

You can also validate more complex props like shapes and arrays of specific types:

ProductCard.propTypes = {
  product: PropTypes.shape({
    name: PropTypes.string,
    price: PropTypes.number
  }),
  tags: PropTypes.arrayOf(PropTypes.string)
};

🚨 Default Props

If a prop isn’t passed, you can specify a default value using defaultProps.

Greeting.defaultProps = {
  name: 'Guest'
};

This ensures your component still works smoothly even if some props are missing.

📌 Best Practices for Props

• Use destructuring in function arguments for cleaner syntax
• Validate important props using PropTypes
• Set defaultProps to avoid errors from missing values
• Keep components small and focused — avoid passing too many props
• If passing functions, clearly name them (e.g. onSubmit, handleClick)

🧠 Recap: What You Learned

• How to pass props to child components
• Why props are immutable
• How to validate props using PropTypes
• How to set default values for props

Props are the bridge between components. They let your app stay modular, flexible, and maintainable. Mastering props is essential to becoming a confident React developer.

🎯 What’s Next?

• Learn about useState to make components interactive
• Explore conditional rendering with props
• Build reusable UI libraries using props and default values

Props are one of React’s core concepts — and now that you've got the hang of passing and validating them, you're ready to build powerful, reusable components with confidence. 🚀