💻Assignments Of Class 12
Project 1 – Profile Card App
Assignment 1: Create a Simple
Profile Card Using Props
Task:
Create
a ProfileCard component that displays a user’s name, role, and profile
picture using props.
Solution:
function ProfileCard(props) {
return (
<div className="card">
<img src={props.imageUrl} alt="Profile" width="150"
/>
<h2>{props.name}</h2>
<h4>{props.role}</h4>
</div>
);
}
function App() {
return (
<ProfileCard
name="Alice Smith"
role="UI Designer"
imageUrl="https://randomuser.me/api/portraits/women/68.jpg"
/>
);
}
export default App;
Explanation:
- Data is passed from App to ProfileCard
as props.
- The ProfileCard uses props to
display the information.
- Props are read-only inside
components.
Assignment 2: Pass Multiple Profiles
and Render a List
Task:
Render
a list of three different profile cards by passing data as props.
Solution:
function ProfileCard({ name, role, imageUrl }) {
return (
<div className="card">
<img src={imageUrl} alt={name} width="150" />
<h2>{name}</h2>
<h4>{role}</h4>
</div>
);
}
function App() {
const profiles = [
{ name: "Alice Smith", role: "UI Designer", imageUrl:
"https://randomuser.me/api/portraits/women/68.jpg" },
{ name: "Bob Johnson", role: "Backend Developer", imageUrl:
"https://randomuser.me/api/portraits/men/45.jpg" },
{ name: "Carol Lee", role: "Project Manager", imageUrl:
"https://randomuser.me/api/portraits/women/50.jpg" },
];
return (
<div>
{profiles.map((profile, index) => (
<ProfileCard
key={index}
name={profile.name}
role={profile.role}
imageUrl={profile.imageUrl}
/>
))}
</div>
);
}
export default App;
Explanation:
- Use .map() to iterate over
profiles.
- Pass each profile’s data as
props.
- Use key to help React track
elements.
Assignment 3: Add a Button to Toggle
Extra Details Using State
Task:
Add
a button to toggle showing email and phone details inside the
ProfileCard.
Solution:
import React, { useState } from "react";
function ProfileCard({ name, role,
imageUrl }) {
const [showDetails, setShowDetails] = useState(false);
return (
<div className="card">
<img src={imageUrl} alt={name} width="150" />
<h2>{name}</h2>
<h4>{role}</h4>
<button onClick={() => setShowDetails(!showDetails)}>
{showDetails ? "Hide Details"
: "Show Details"}
</button>
{showDetails && (
<div>
<p>Email: example@example.com</p>
<p>Phone: +1 555 555 5555</p>
</div>
)}
</div>
);
}
function App() {
return (
<ProfileCard
name="Alice Smith"
role="UI Designer"
imageUrl="https://randomuser.me/api/portraits/women/68.jpg"
/>
);
}
export default App;
Explanation:
- State showDetails controls
visibility.
- Button toggles state on click.
- Conditional rendering with {showDetails
&& <Details>}.
Assignment 4: Lift State Up to
Parent Component
Task:
Move
the toggle state from ProfileCard to the parent App component.
Solution:
import React, { useState } from "react";
function ProfileCard({ name, role,
imageUrl, showDetails }) {
return (
<div className="card">
<img src={imageUrl} alt={name} width="150" />
<h2>{name}</h2>
<h4>{role}</h4>
{showDetails && (
<div>
<p>Email: example@example.com</p>
<p>Phone: +1 555 555 5555</p>
</div>
)}
</div>
);
}
function App() {
const [showDetails, setShowDetails] = useState(false);
return (
<div>
<ProfileCard
name="Alice Smith"
role="UI
Designer"
imageUrl="https://randomuser.me/api/portraits/women/68.jpg"
showDetails={showDetails}
/>
<button onClick={() => setShowDetails(!showDetails)}>
{showDetails ? "Hide Details"
: "Show Details"}
</button>
</div>
);
}
export default App;
Explanation:
- State is managed by App.
- showDetails passed as prop to ProfileCard.
- App controls when details show
or hide.
Assignment 5: Create a ToggleButton
Component
Task:
Create
a reusable ToggleButton component that controls the visibility of details in ProfileCard.
Solution:
import React, { useState } from "react";
function ToggleButton({ isOn, toggle
}) {
return (
<button onClick={toggle}>
{isOn ? "Hide Details" : "Show Details"}
</button>
);
}
function ProfileCard({ name, role,
imageUrl, showDetails }) {
return (
<div className="card">
<img src={imageUrl} alt={name} width="150" />
<h2>{name}</h2>
<h4>{role}</h4>
{showDetails && (
<div>
<p>Email: example@example.com</p>
<p>Phone: +1 555 555 5555</p>
</div>
)}
</div>
);
}
function App() {
const [showDetails, setShowDetails] = useState(false);
return (
<div>
<ProfileCard
name="Alice Smith"
role="UI Designer"
imageUrl="https://randomuser.me/api/portraits/women/68.jpg"
showDetails={showDetails}
/>
<ToggleButton isOn={showDetails} toggle={() =>
setShowDetails(!showDetails)} />
</div>
);
}
export default App;
Explanation:
- ToggleButton receives isOn and toggle
props.
- Keeps button logic separate for
reusability.
- Clean separation of concerns.
Assignment 6: Add Multiple Toggle
Buttons for Different Sections
Task:
Add
two buttons: one toggles contact info and another toggles hobbies
section.
Solution:
import React, { useState } from "react";
function ProfileCard({ name, role,
imageUrl, showContact, showHobbies }) {
return (
<div className="card">
<img src={imageUrl} alt={name} width="150" />
<h2>{name}</h2>
<h4>{role}</h4>
{showContact && (
<div>
<p>Email: example@example.com</p>
<p>Phone: +1 555 555 5555</p>
</div>
)}
{showHobbies && (
<div>
<p>Hobbies: Reading, Traveling,
Music</p>
</div>
)}
</div>
);
}
function App() {
const [showContact, setShowContact] = useState(false);
const [showHobbies, setShowHobbies] = useState(false);
return (
<div>
<ProfileCard
name="Alice Smith"
role="UI Designer"
imageUrl="https://randomuser.me/api/portraits/women/68.jpg"
showContact={showContact}
showHobbies={showHobbies}
/>
<button onClick={() => setShowContact(!showContact)}>
{showContact ? "Hide Contact"
: "Show Contact"}
</button>
<button onClick={() => setShowHobbies(!showHobbies)}>
{showHobbies ? "Hide Hobbies"
: "Show Hobbies"}
</button>
</div>
);
}
export default App;
Explanation:
- Multiple states to toggle
different sections.
- Each button controls one piece
of state.
Assignment 7: Pass Functions as
Props to Child Components
Task:
Create
a ToggleButton that calls a toggle function passed from parent to update state.
Solution:
function ToggleButton({ label, onToggle }) {
return <button onClick={onToggle}>{label}</button>;
}
function App() {
const [showDetails, setShowDetails] = useState(false);
return (
<div>
<ProfileCard
name="Alice Smith"
role="UI Designer"
imageUrl="https://randomuser.me/api/portraits/women/68.jpg"
showDetails={showDetails}
/>
<ToggleButton
label={showDetails ? "Hide Details"
: "Show Details"}
onToggle={() =>
setShowDetails(!showDetails)}
/>
</div>
);
}
Explanation:
- Parent passes toggle function
to child as a prop.
- Child calls that function on
button click.
Assignment 8: Initialize State Using
Props
Task:
Initialize
the toggle state in ProfileCard based on a prop value passed from parent.
Solution:
import React, { useState, useEffect } from "react";
function ProfileCard({ name, role,
imageUrl, initialShow }) {
const [showDetails, setShowDetails] = useState(initialShow);
return (
<div className="card">
<img src={imageUrl} alt={name} width="150" />
<h2>{name}</h2>
<h4>{role}</h4>
<button onClick={() => setShowDetails(!showDetails)}>
{showDetails ? "Hide Details"
: "Show Details"}
</button>
{showDetails && (
<div>
<p>Email: example@example.com</p>
<p>Phone: +1 555 555 5555</p>
</div>
)}
</div>
);
}
function App() {
return (
<ProfileCard
name="Alice Smith"
role="UI Designer"
imageUrl="https://randomuser.me/api/portraits/women/68.jpg"
initialShow={true}
/>
);
}
export default App;
Explanation:
- State initialized using initialShow
prop.
- Allows the parent to decide
default toggle state.
Assignment 9: Create Controlled
Input to Update Profile Name
Task:
Add
an input field to update the profile name using state and event handling.
Solution:
import React, { useState } from "react";
function ProfileCard({ name, role,
imageUrl }) {
return (
<div className="card">
<img src={imageUrl} alt={name} width="150" />
<h2>{name}</h2>
<h4>{role}</h4>
</div>
);
}
function App() {
const [name, setName] = useState("Alice Smith");
return (
<div>
<input
type="text"
value={name}
onChange={(e) =>
setName(e.target.value)}
/>
<ProfileCard
name={name}
role="UI Designer"
imageUrl="https://randomuser.me/api/portraits/women/68.jpg"
/>
</div>
);
}
export default App;
Explanation:
- Controlled input bound to name
state.
- On typing, name updates and
passed as prop to ProfileCard.
- Real-time update on the profile
card.
Assignment 10: Add Event to Reset
Profile Name
Task:
Add
a button to reset the profile name to the original default.
Solution:
import React, { useState } from "react";
function ProfileCard({ name, role,
imageUrl }) {
return (
<div className="card">
<img src={imageUrl} alt={name} width="150" />
<h2>{name}</h2>
<h4>{role}</h4>
</div>
);
}
function App() {
const defaultName = "Alice Smith";
const [name, setName] = useState(defaultName);
function resetName() {
setName(defaultName);
}
return (
<div>
<input
type="text"
value={name}
onChange={(e) =>
setName(e.target.value)}
/>
<button onClick={resetName}>Reset Name</button>
<ProfileCard
name={name}
role="UI Designer"
imageUrl="https://randomuser.me/api/portraits/women/68.jpg"
/>
</div>
);
}
export default App;
Explanation:
- Button calls resetName to set
name back to default.
- Demonstrates event handling and
state reset.
Summary
- Assignments cover props,
state, event handling, conditional rendering, lifting
state up, and controlled components.
- Solutions include clear, simple
code suitable for beginners.
- Each task builds on the
previous to reinforce concepts.
