📄Assignments Of Class 4
Props in Depth
✅ Assignment 1: Create a Simple
Welcome Component Using Props
Task:Create a component Welcome that receives a name as a prop and displays
"Hello, [name]!".
✅ Solution:
function Welcome({ name }) {
return <h1>Hello, {name}!</h1>;
}
function App() {
return <Welcome name="Amit" />;
}
Output:
Hello,
Amit!
✅ Assignment 2: Pass an Object as a
Prop
Task:Create a component StudentInfo that receives a student object with name and grade
and displays the details.
✅ Solution:
function StudentInfo({ student }) {
return (
<div>
<h2>Name: {student.name}</h2>
<p>Grade: {student.grade}</p>
</div>
);
}
function App() {
const student = { name: "Ravi", grade: "A+" };
return <StudentInfo student={student} />;
}
✅ Assignment 3: Pass an Array as a
Prop and Display List
Task:Create a component SubjectList that receives an array of subjects and displays
them in a list.
✅ Solution:
function SubjectList({ subjects }) {
return (
<ul>
{subjects.map((subject, index) => (
<li key={index}>{subject}</li>
))}
</ul>
);
}
function App() {
const subjects = ["Math", "Science", "English"];
return <SubjectList subjects={subjects} />;
}
✅ Assignment 4: Create a Wrapper
Component Using children Prop
Task:Create a component Container that wraps its children inside a div with a
border.
✅ Solution:
function Container({ children }) {
return <div style={{ border: "1px solid black", padding:
"10px" }}>{children}</div>;
}
function App() {
return (
<Container>
<p>This is wrapped content!</p>
</Container>
);
}
✅ Assignment 5: Create a StudentCard
Component Using Props
Task:Create a component StudentCard that receives name, grade, and image props and
displays a student card.
✅ Solution:
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 (
<StudentCard
name="Neha"
grade="A"
image="https://via.placeholder.com/100"
/>
);
}
✅ Assignment 6: Render Multiple StudentCard
Components
Task:Use the StudentCard component to display 5 different students.
✅ Solution:
function App() {
return (
<div>
<StudentCard name="Anjali" grade="A+" image="https://via.placeholder.com/100"
/>
<StudentCard name="Rahul" grade="B" image="https://via.placeholder.com/100"
/>
<StudentCard name="Kiran" grade="A" image="https://via.placeholder.com/100"
/>
<StudentCard name="Suresh" grade="C" image="https://via.placeholder.com/100"
/>
<StudentCard name="Meena" grade="B+" image="https://via.placeholder.com/100"
/>
</div>
);
}
✅ Assignment 7: Create a Component
to Show Contact Info
Task:Create a component ContactCard that takes props: name, email, and phone.
✅ Solution:
function ContactCard({ name, email,
phone }) {
return (
<div>
<h3>{name}</h3>
<p>Email: {email}</p>
<p>Phone: {phone}</p>
</div>
);
}
function App() {
return (
<ContactCard
name="Sunita"
email="sunita@example.com"
phone="9876543210"
/>
);
}
✅ Assignment 8: Display Student
Scores Using Props
Task:
Create a component ScoreCard that takes a student name and an array of marks
and shows the total.
✅ Solution:
function ScoreCard({ name, marks }) {
const total = marks.reduce((a, b) => a + b, 0);
return (
<div>
<h2>{name}</h2>
<p>Total Marks: {total}</p>
</div>
);
}
function App() {
return <ScoreCard name="Rohan" marks={[85, 90, 78]} />;
}
✅ Assignment 9: Conditional
Rendering with Props
Task:Create a ResultCard component that shows “Pass” if grade is A or B, otherwise
“Fail”.
✅ Solution:
function ResultCard({ name, grade }) {
const isPass = grade === "A" || grade === "B";
return (
<div>
<h3>{name}</h3>
<p>Result: {isPass ? "Pass" : "Fail"}</p>
</div>
);
}
return <ResultCard name="Alok" grade="C" />;
}
✅ Assignment 10: Style Cards Using
Props and CSS
Task:Create multiple styled StudentCards using a common class and CSS.
✅ Solution:
/* Add this CSS to your stylesheet */
.card {
border: 1px solid #ccc;
padding: 10px;
width: 200px;
margin: 10px;
text-align: center;
}
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 style={{ display: "flex", gap: "10px" }}>
<StudentCard name="Aditi" grade="A" image="https://via.placeholder.com/100"
/>
<StudentCard name="Pawan" grade="B+" image="https://via.placeholder.com/100"
/>
</div>
);
}
