💻Lecture Notes Of Class 4Props in Depth
🔹 Objective:
Understand
how to pass and use data with props in React components — including objects,
arrays, and children.
🔸 What are Props in React?
Props (short for Properties) are inputs
to a React component. They allow you to pass data from a parent
component to a child component.
Think
of props like function arguments, and components like functions.
👉 Syntax:
<ComponentName propName="value" />
You
can access props inside a component like this:
function ComponentName(props) {
return <h1>{props.propName}</h1>;
}
Or
using destructuring:
function ComponentName({ propName }) {
return <h1>{propName}</h1>;
}
🔸 1. Passing Simple Props
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
function App() {
return <Welcome name="Amit" />;
}
Output:
Hello,
Amit!
🔸 2. Props with Objects
You
can pass an entire object as a prop.
function Student({ student }) {
return (
<div>
<h2>{student.name}</h2>
<p>Grade: {student.grade}</p>
</div>
);
}
function App() {
const studentInfo = { name: "Ravi", grade: "A" };
return <Student student={studentInfo} />;
}
🔸 3. Props with Arrays
You
can pass arrays as props, and use them inside components.
function Subjects({ subjects }) {
return (
<ul>
{subjects.map((sub, index) => (
<li key={index}>{sub}</li>
))}
</ul>
);
}
function App() {
const mySubjects = ["Math", "Science", "English"];
return <Subjects subjects={mySubjects} />;
}
🔸 4. Props with Children
React
provides a special prop called children to pass elements between opening
and closing component tags.
function Box(props) {
return <div className="box">{props.children}</div>;
}
function App() {
return (
<Box>
<p>This is inside the box!</p>
</Box>
);
}
This
is useful for layout or wrapper components.
🔸 5. 🛠️ Activity:
Create a StudentCard Component
👉 Goal:Create a StudentCard component that receives the following props:
- name
- grade
- image (URL of student's photo)
✅ Output Example:
function StudentCard({ name, grade, image }) {
return (
<div className="card">
<img src={image} alt={`${name}`} width="100" />
<h2>{name}</h2>
<p>Grade: {grade}</p>
</div>
);
}
function App() {
return (
<div>
<StudentCard
name="Priya Sharma"
grade="A+"
image="https://via.placeholder.com/100"
/>
</div>
);
}
💡 Styling Tip:
You
can add some CSS for .card to make it look better:
.card {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
width: 150px;
text-align: center;
}
📝 Homework
🔨 Task:Create 5 student cards using the StudentCard component. Use different names, grades, and image URLs.
✅ Example:
function App() {
return (
<div className="cards-container">
<StudentCard name="Anjali" grade="A" image="..."
/>
<StudentCard name="Rohit" grade="B+" image="..."
/>
<StudentCard name="Suman" grade="A+" image="..."
/>
<StudentCard name="Karan" grade="B" image="..."
/>
<StudentCard name="Meena" grade="A" image="..."
/>
</div>
);
}
🎯 Summary
|
Concept |
Explanation |
|
props |
Used to pass data to child components |
|
Object Props |
Pass a full object to a component |
|
Array Props |
Pass a list and render using .map() |
|
Children Props |
Allows passing elements inside component tags |
📚 Tips for Students:
- Always pass unique keys when
rendering arrays.
- Props are read-only –
you can't change them inside the child.
- Use destructuring for cleaner
code.
