Props are used to pass data from a parent component to a child component in React. The word props is short for properties.
Props are values passed from one React component to another component. Usually, a parent component passes props to its child component.
function Student(props) {
return (
<h2>{props.name}</h2>
);
}Props are useful when a component needs to receive data from its parent component.
The component that sends props is generally called the parent component, while the component receiving them is called the child component.
Parent
|
| props
↓
ChildA string can be passed to a component as a prop.
function App() {
return (
<Student name="Rahul" />
);
}
Here, name is the prop and Rahul is its value.
The child component receives props through the function parameter.
function Student(props) {
return (
<h2>
{props.name}
</h2>
);
}function Student(props) {
return (
<div>
<h2>
{props.name}
</h2>
<p>
Course: {props.course}
</p>
</div>
);
}
function App() {
return (
<Student
name="Rahul"
course="React"
/>
);
}A component can receive multiple props.
<Student
name="Rahul"
age={21}
course="React"
/>
Here, the component receives name, age, and
course.
function Student(props) {
return (
<div>
<h2>{props.name}</h2>
<p>Age: {props.age}</p>
<p>Course: {props.course}</p>
</div>
);
}Numbers should normally be passed using curly braces.
<Student
age={21}
/>Inside the component:
function Student(props) {
return (
<p>
Age: {props.age}
</p>
);
}Boolean values can also be passed as props.
<Student
isActive={true}
/>function Student(props) {
return (
<p>
Active: {props.isActive ? "Yes" : "No"}
</p>
);
}Arrays can be passed to a component using curly braces.
<Student
subjects={["HTML", "CSS", "React"]}
/>The child component can access the array through the prop.
Objects can also be passed as props.
<Student
data={{
name: "Rahul",
age: 21
}}
/>function Student(props) {
return (
<h2>
{props.data.name}
</h2>
);
}Any JavaScript expression can be used when passing a dynamic prop.
const studentName = "Amit";
function App() {
return (
<Student
name={studentName}
/>
);
}Expressions can also be calculated before being passed to a component.
const price = 500;
const quantity = 3;
<Product
total={price * quantity}
/>
Instead of repeatedly writing props.name, properties can
be destructured directly.
function Student({ name, age }) {
return (
<div>
<h2>{name}</h2>
<p>Age: {age}</p>
</div>
);
}The same component can be used multiple times with different data.
function App() {
return (
<div>
<Student
name="Rahul"
course="React"
/>
<Student
name="Neha"
course="JavaScript"
/>
<Student
name="Amit"
course="Python"
/>
</div>
);
}Props are useful for displaying dynamic content.
function Welcome({ name }) {
return (
<h1>
Welcome, {name}!
</h1>
);
}<Welcome name="Priya" />Props can be used to dynamically set image attributes.
function Profile({ image, name }) {
return (
<div>
<img
src={image}
alt={name}
/>
<h2>{name}</h2>
</div>
);
}Props can make buttons reusable.
function Button({ text }) {
return (
<button className="btn btn-primary">
{text}
</button>
);
}<Button text="Save" />
<Button text="Update" />
<Button text="Delete" />A prop can be used to dynamically assign a CSS class.
function Button({ type }) {
return (
<button className={type}>
Click Me
</button>
);
}<Button type="btn btn-success" />A function can also be passed as a prop. This is commonly used for handling events in child components.
function Button({ onClick }) {
return (
<button onClick={onClick}>
Click Me
</button>
);
}function App() {
function handleClick() {
alert("Button clicked!");
}
return (
<Button
onClick={handleClick}
/>
);
}This allows the child component to trigger behavior defined by the parent.
Props should be treated as read-only values inside the child component.
function Student(props) {
// Do not modify props directly
return (
<h2>{props.name}</h2>
);
}If data needs to change, React state is generally used instead of modifying props directly.
| Props | State |
|---|---|
| Passed from parent to child | Managed by the component |
| Read-only | Can be updated using state setters |
| Used to pass data | Used to manage changing data |
| Controlled by parent | Managed inside the component |
Default parameter values can be used when a prop is not provided.
function Welcome({ name = "Student" }) {
return (
<h2>
Welcome, {name}
</h2>
);
}<Welcome />
The component will use Student when no
name is supplied.
The special children prop contains content placed
between a component's opening and closing tags.
function Card({ children }) {
return (
<div className="card">
{children}
</div>
);
}<Card>
<h2>React Course</h2>
<p>Learn React.</p>
</Card>Props make components reusable by allowing the same component to display different information.
function Course({ name, duration }) {
return (
<div>
<h2>{name}</h2>
<p>
Duration: {duration}
</p>
</div>
);
}<Course
name="React"
duration="3 Months"
/>
<Course
name="Python"
duration="6 Months"
/>
An array can be passed as a prop and then displayed using
map().
function StudentList({ students }) {
return (
<ul>
{students.map(student => (
<li key={student}>
{student}
</li>
))}
</ul>
);
}
function App() {
const students = [
"Rahul",
"Neha",
"Amit"
];
return (
<StudentList
students={students}
/>
);
}function StudentCard({
name,
course,
age
}) {
return (
<div className="card">
<h2>
{name}
</h2>
<p>
Age: {age}
</p>
<p>
Course: {course}
</p>
</div>
);
}
function App() {
return (
<div>
<StudentCard
name="Rahul"
age={21}
course="React"
/>
<StudentCard
name="Neha"
age={20}
course="JavaScript"
/>
</div>
);
}
export default App;Here, one reusable component displays different student information using props.
children prop contains nested component content.props.propertyName.children prop is used for nested content.Question: What is the main purpose of props in React?