React Props
In React, props (short for properties) are the way to pass data from a parent component to a child component.
Props make components dynamic, reusable, and modular, allowing you to build interactive and maintainable UIs.
What Are Props?
- Props are read-only inputs for a component.
- They allow a parent component to send data or functions to a child component.
- A child component cannot modify props — it can only use them.
Analogy: Think of props like function arguments. You pass them to a component, and the component uses them to render something.
Using Props in Functional Components
Example – Passing Data:
function Greeting(props) {
return <h2>Hello, {props.name}!</h2>;
}
function App() {
return (
<div>
<Greeting name="Alice" />
<Greeting name="Bob" />
</div>
);
}
Destructuring Props (Cleaner Syntax):
Using destructuring avoids repeatedly writing props. inside the component.
function Greeting({ name }) {
return <h2>Hello, {name}!</h2>;
}
Props in Class Components
In class components, props are accessed using this.props.
Example – Class Component Props:
class Greeting extends React.Component {
render() {
return <h2>Hello, {this.props.name}!</h2>;
}
}
function App() {
return <Greeting name="Charlie" />;
}
Passing Multiple Props
You can pass multiple props to a component:
function UserCard({ name, age, profession }) {
return (
<div>
<h3>{name}</h3>
<p>Age: {age}</p>
<p>Profession: {profession}</p>
</div>
);
}
function App() {
return <UserCard name="Alice" age={25} profession="Developer" />;
}
Passing Functions as Props
Props can also pass functions, allowing child components to communicate with parent components.
function Button({ handleClick }) {
return <button onClick={handleClick}>Click Me</button>;
}
function App() {
const sayHello = () => alert("Hello from App!");
return <Button handleClick={sayHello} />;
}
Default Props
You can set default values for props if the parent doesn’t provide them.
Functional Component Default Props:
function Greeting({ name = "Guest" }) {
return <h2>Hello, {name}!</h2>;
}
Class Component Default Props:
class Greeting extends React.Component {
static defaultProps = {
name: "Guest",
};
render() {
return <h2>Hello, {this.props.name}!</h2>;
}
}
Children Props
React provides a special prop called children, allowing you to pass nested content to a component.
- Anything between <Card>...</Card> is passed as children.
- This makes components flexible and reusable.
function Card({ children }) {
return <div className="card">{children}</div>;
}
function App() {
return (
<Card>
<h2>Title</h2>
<p>This is some content inside the card.</p>
</Card>
);
}
Combining Multiple Props and Children
function UserCard({ name, age, profession, children }) {
return (
<div className="user-card">
<h3>{name}</h3>
<p>Age: {age}</p>
<p>Profession: {profession}</p>
<div>{children}</div>
</div>
);
}
function App() {
return (
<UserCard name="Alice" age={25} profession="Developer">
<p>Location: New York</p>
</UserCard>
);
}
Prop Types (Optional but Recommended)
For better code quality, you can validate props using the prop-types library:
import PropTypes from "prop-types";
function Greeting({ name }) {
return <h2>Hello, {name}!</h2>;
}
Greeting.propTypes = {
name: PropTypes.string.isRequired,
};