⚛️ Props and Props Validation

? Quick Overview

Props (short for properties) let you pass data from a parent component to a child component. They make components dynamic, configurable, and reusable.

Think of props like function parameters — you pass values in, and the component uses them inside its JSX.

PropTypes are used to validate prop types at runtime (in development), helping you catch bugs when the wrong type of data is passed.

? Key Concepts

• Props flow one way: from parent to child (unidirectional data flow).
• Props are read-only inside the child component.
• Components can accept multiple props (strings, numbers, arrays, objects, functions).
• PropTypes help ensure each prop has the expected type.
• defaultProps provide fallback values when a prop is not passed.
• Using destructuring makes prop access cleaner and easier to read.

? Syntax & Theory

• Define a component that receives props:
  function ComponentName(props) {'{'} ... {'}'}
• Access props using dot notation:
  props.name, props.age, etc.
• Destructure props for cleaner syntax:
  function ComponentName({'{'} name, age {'}'}) {'{'} ... {'}'}
• Attach propTypes to a component to validate types:
  ComponentName.propTypes = {'{'} name: PropTypes.string {'}'}
• Attach defaultProps to define default values:
  ComponentName.defaultProps = {'{'} name: "Guest" {'}'}

? Example: Passing Props

Here is a simple example where the parent component App passes a name prop to the child component Greeting.

// Greeting.js - child component that reads the name prop
function Greeting(props) {
return <h2>Hello, {props.name}!</h2>;
}
// App.js - parent component that passes different names
import Greeting from "./Greeting";
function App() {
return (
<div>
<Greeting name="Meghraj" />
<Greeting name="Aarav" />
</div>
);
}
export default App;

The Greeting component receives the name prop from its parent (App) and renders it dynamically.

? Destructuring Props

Instead of using props.name, you can simplify the code using JavaScript destructuring. This is especially helpful when there are many props.

// Greeting.js - using destructuring for cleaner props access
function Greeting({ name }) {
return <h2>Hello, {name}!</h2>;
}

Destructuring makes it clear which props the component expects and improves readability.

? Passing Multiple Props

A component can accept and use multiple props. Each prop can have a different type (string, number, boolean, etc.).

// Profile.js - component that uses multiple props
function Profile({ name, age, city }) {
return (
<div>
<h3>Name: {name}</h3>
<p>Age: {age}</p>
<p>City: {city}</p>
</div>
);
}
// Example usage of the Profile component
function App() {
return (
<div>
<Profile name="Riya" age={22} city="Pune" />
</div>
);
}

Props can hold any type of data — strings, numbers, arrays, objects, or even functions.

⚠️ Why Validate Props?

When components expect specific data types, incorrect props can cause unexpected behavior or runtime errors. That’s where PropTypes come in — they help validate that each prop is of the correct type during development.

? Using PropTypes for Validation

PropTypes is a separate package in React used for runtime type checking of props. If a wrong type is passed, React shows a warning in the console (in development mode only).

// User.js - component with PropTypes and defaultProps
import PropTypes from "prop-types";
function User({ name, age, isMember }) {
return (
<div>
<h3>{name}</h3>
<p>Age: {age}</p>
<p>Member: {isMember ? "Yes" : "No"}</p>
</div>
);
}
// Prop validation using PropTypes
User.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
isMember: PropTypes.bool
};
// Default values if some props are not passed
User.defaultProps = {
isMember: false
};
export default User;

If you pass a non-string value to name (like a number), React will log a helpful warning telling you that the type is incorrect.

? Common PropTypes

• PropTypes.string – Text data
• PropTypes.number – Numeric values
• PropTypes.bool – Boolean values
• PropTypes.array – Arrays
• PropTypes.object – Objects
• PropTypes.func – Functions
• PropTypes.node – Anything renderable (string, number, element)
• PropTypes.element – A single React element

? Default Props

You can set default values for props using defaultProps. These values are used when the parent doesn’t pass that prop.

// Welcome.js - component using defaultProps
function Welcome({ name }) {
return <h2>Welcome, {name}!</h2>;
}
// Fallback value if name is not provided
Welcome.defaultProps = {
name: "Guest"
};
export default Welcome;

Now even if name isn’t passed, it defaults to "Guest".

? Live Output & Explanation