ReactJS : Practice Set 3
Q 1. Build a React component which takes an image, image height and image width as props and sets the height and width of the image and displays the image on DOM.
Image link: https://picsum.photos/200
Solution:
ImageCard.jsx
import React from "react";
const ImageCard = ({ imageLink, height, width }) => {
return (
<div>
<img src={imageLink} alt="" height={height} width={width} />
</div>
);
};
export default ImageCard;
App.jsx
import React from "react";
import "./App.css";
import ImageCard from "./components/ImageCard";
function App() {
return (
<>
<ImageCard
imageLink={"https://picsum.photos/200"}
height={"400px"}
width={"600px"}
/>
</>
);
}
export default App;
Output:
Q2. Given an array of objects with cartoon character details as: id, name, superpower, magnitude. Build a React component and display all details of those characters whose magnitude is greater than 5.
Data:
const cartoons = [
{
id: 1,
name: "Mickey Mouse",
superpower: "Invisibility",
magnitude: 1,
},
{
id: 2,
name: "Spongebob Squarepants",
superpower: "Super Strength",
magnitude: 3,
},
{
id: 3,
name: "Bugs Bunny",
superpower: "Teleportation",
magnitude: 9,
},
{
id: 4,
name: "Tom and Jerry",
superpower: "Intelligence",
magnitude: 8,
},
{
id: 5,
name: "The Powerpuff Girls",
superpower: "Flight",
magnitude: 10,
},
];
Solution:
CartoonCharacter.jsx
import React from "react";
const CartoonCharacter = ({ cartoons }) => {
return (
<div>
<h1>Catoons Charater details:</h1>
<h2> Whose Magnitude is greater than 5:</h2>
{cartoons.map(({ id, name, superpower, magnitude }) => {
return magnitude > 5 ? (
<div key={id} style={{ border: "1px solid red" }}>
<h2>Name: {name}</h2>
<h3>Super Power: {superpower}</h3>
<h3>magnitude: {magnitude}</h3>
</div>
) : (
""
);
})}
</div>
);
};
export default CartoonCharacter;
App.jsx
import React from "react";
import "./App.css";
import CartoonCharacter from "./components/CartoonCharacter";
const cartoons = [
{
id: 1,
name: "Mickey Mouse",
superpower: "Invisibility",
magnitude: 1,
},
{
id: 2,
name: "Spongebob Squarepants",
superpower: "Super Strength",
magnitude: 3,
},
{
id: 3,
name: "Bugs Bunny",
superpower: "Teleportation",
magnitude: 9,
},
{
id: 4,
name: "Tom and Jerry",
superpower: "Intelligence",
magnitude: 8,
},
{
id: 5,
name: "The Powerpuff Girls",
superpower: "Flight",
magnitude: 10,
},
];
function App() {
return (
<>
<CartoonCharacter cartoons={cartoons} />
</>
);
}
export default App;
Output:
Q 3.Use the cartoons data from above question (2) and build a React component to display only the names of characters whose magnitude is an even number. Use h1 tag to display names. Pass the entire data as props.
Solution:
CartoonCharacter2.jsx
import React from "react";
const CartoonCharacter2 = ({ cartoons }) => {
return (
<div>
<h1>Catoons Charater name:</h1>
<h2> Whose Magnitude is even number:</h2>
{cartoons.map(({ id, name, magnitude }) => {
return magnitude % 2 === 0 ? (
<div key={id} style={{ border: "1px solid red" }}>
<h1>Name: {name}</h1>
</div>
) : (
""
);
})}
</div>
);
};
export default CartoonCharacter2;
App.jsx
import React from "react";
import "./App.css";
import CartoonCharacter2 from "./components/CartoonCharacter2";
const cartoons = [
{
id: 1,
name: "Mickey Mouse",
superpower: "Invisibility",
magnitude: 1,
},
{
id: 2,
name: "Spongebob Squarepants",
superpower: "Super Strength",
magnitude: 3,
},
{
id: 3,
name: "Bugs Bunny",
superpower: "Teleportation",
magnitude: 9,
},
{
id: 4,
name: "Tom and Jerry",
superpower: "Intelligence",
magnitude: 8,
},
{
id: 5,
name: "The Powerpuff Girls",
superpower: "Flight",
magnitude: 10,
},
];
function App() {
return (
<>
<CartoonCharacter2 cartoons={cartoons} />
</>
);
}
export default App;
Output:
Q 4. Use the cartoons data from above question (2) and build a React component that takes the superpower ”Intelligence”, as prop and display the details of the character having that super power. Show details on DOM in the format “name-superpower-magnitude”.
Solution:
CartoonCharacter3.jsx
import React from "react";
const CartoonCharacter3 = ({ cartoons, superpowerProps }) => {
return (
<div>
<h1>Catoons Charater details:</h1>
<h2> Whose Magnitude is greater than 5:</h2>
{cartoons.map(({ id, name, superpower, magnitude }) => {
return superpower === superpowerProps ? (
<div key={id} style={{ border: "1px solid red" }}>
<h2>
{name} - {superpower} -{magnitude}
</h2>
</div>
) : (
""
);
})}
</div>
);
};
export default CartoonCharacter3;
App.jsx
import React from "react";
import "./App.css";
import CartoonCharacter2 from "./components/CartoonCharacter2";
import CartoonCharacter3 from "./components/CartoonCharacter3";
const cartoons = [
{
id: 1,
name: "Mickey Mouse",
superpower: "Invisibility",
magnitude: 1,
},
{
id: 2,
name: "Spongebob Squarepants",
superpower: "Super Strength",
magnitude: 3,
},
{
id: 3,
name: "Bugs Bunny",
superpower: "Teleportation",
magnitude: 9,
},
{
id: 4,
name: "Tom and Jerry",
superpower: "Intelligence",
magnitude: 8,
},
{
id: 5,
name: "The Powerpuff Girls",
superpower: "Flight",
magnitude: 10,
},
];
function App() {
return (
<>
<CartoonCharacter3 cartoons={cartoons} superpowerProps={"Intelligence"} />
</>
);
}
export default App;
Output:
Q 5. Build a React component to display the list of all the vegetables and their pick date as ordered list. Create a button which says “Highlight Fresh Vegetables”. On click of the button change the color of the vegetable to green whose pick date is ‘2023–03–30’.
Data:
const vegetables = [
{
id: 1,
name: "Carrots",
pickDate: "2023-03-25",
},
{
id: 2,
name: "Broccoli",
pickDate: "2023-03-30",
},
{
id: 3,
name: "Peppers",
pickDate: "2023-03-25",
},
{
id: 4,
name: "Tomatoes",
pickDate: "2023-03-27",
},
{
id: 5,
name: "Ladies Finger",
pickDate: "2023-03-30",
},
];
Solution:
ListOfVegetables.jsx
import React, { useState } from "react";
const ListOfVegetables = ({ vegetables }) => {
const [highlight, setHighlight] = useState(false);
return (
<div>
<ul>
{vegetables.map(({ id, name, pickDate }) => {
return (
<h3>
{" "}
<li
style={{
color: highlight && pickDate === "2023-03-30" ? "green" : "",
}}
>
{name} - {pickDate}
</li>
</h3>
);
})}
</ul>
<button onClick={() => setHighlight(!highlight)}>
Highlight Fresh Vegetables
</button>
</div>
);
};
export default ListOfVegetables;
App.jsx
import React from "react";
import "./App.css";
import ListOfVegetables from "./components/ListOfVegetables";
const vegetables = [
{
id: 1,
name: "Carrots",
pickDate: "2023-03-25",
},
{
id: 2,
name: "Broccoli",
pickDate: "2023-03-30",
},
{
id: 3,
name: "Peppers",
pickDate: "2023-03-25",
},
{
id: 4,
name: "Tomatoes",
pickDate: "2023-03-27",
},
{
id: 5,
name: "Ladies Finger",
pickDate: "2023-03-30",
},
];
function App() {
return (
<>
<ListOfVegetables vegetables={vegetables} />
</>
);
}
export default App;
Output:
Before click on button:
After Clicking on Button:
— — — — — — — — — — — — — — — — — — — — — — — — — — — — -
Q 6. Build a React component which takes an array of objects as props. The object represents a bouquet of mixed flowers and consists of: id, flowers, totalFlowers, and price.
Display the price of that bouquet on the DOM that has rose in it, in the format, “Price of bouquet with roses : {price}”
Data:
const bouquet = [
{
id: 1,
flowers: ['rose', 'lily', 'marigold'],
totalFlowers: 9,
price: 1400,
},
{
id: 2,
flowers: ['snapdragon', 'sunflower'],
totalFlowers: 10,
price: 3400,
},
]
Solution:
BouquetOfRoses.jsx
import React from "react";
const BouquetOfRoses = ({ bouquet }) => {
return (
<div>
{bouquet.map(({ id, flowers, price }) => {
return flowers.includes("rose") ? (
<h3 key={id}>Price of bouquet with roses : {price}</h3>
) : (
""
);
})}
</div>
);
};
export default BouquetOfRoses;
App.jsx
import React from "react";
import "./App.css";
import BouquetOfRoses from "./components/BouquetOfRoses";
const bouquet = [
{
id: 1,
flowers: ["rose", "lily", "marigold"],
totalFlowers: 9,
price: 1400,
},
{
id: 2,
flowers: ["snapdragon", "sunflower"],
totalFlowers: 10,
price: 3400,
},
];
function App() {
return (
<>
<BouquetOfRoses bouquet={bouquet} />
</>
);
}
export default App;
Output:
Q7. Build a React component to display the flowers of a bouquet in an ordered list on the DOM which has a price above 2000. Pass data as prop.
Data:
const bouquet = [
{
id: 1,
flowers: ['rose', 'lily', 'marigold'],
totalFlowers: 9,
price: 1400,
},
{
id: 2,
flowers: ['snapdragon', 'sunflower'],
totalFlowers: 10,
price: 3400,
},
]
// Expected Output
// 1. snapdragon
// 2. sunflower
Solution:
BouquetPriceOver2000.jsx
import React from "react";
const BouquetPriceOver2000 = ({ bouquet }) => {
return (
<div>
{bouquet.map(({ id, flowers, price }) => {
return price > 2000 ? (
<ol>
<h2>List of Flowers Whose bouquet Price is Over 2000:</h2>
{flowers.map((flower, index) => (
<li key={index}>{flower}</li>
))}
</ol>
) : (
""
);
})}
</div>
);
};
export default BouquetPriceOver2000;
App.jsx
import React from "react";
import "./App.css";
import BouquetPriceOver2000 from "./components/BouquetPriceOver2000";
const bouquet = [
{
id: 1,
flowers: ["rose", "lily", "marigold"],
totalFlowers: 9,
price: 1400,
},
{
id: 2,
flowers: ["snapdragon", "sunflower"],
totalFlowers: 10,
price: 3400,
},
];
function App() {
return (
<>
<BouquetPriceOver2000 bouquet={bouquet} />
</>
);
}
export default App;
Output:
Q8. Given an array of objects representing people who donated money to the NGO. Each object consists of: id, name, amount. Build a React component that takes the data as props and shows the total donation collected on the DOM.
Output should be in the format: Total Donation Collected: _amount_
Data:
const DonationData = [
{ id: 1, name: "Nitin", Donation: 7800 },
{
id: 2,
name: "Mehak",
Donation: 9500,
},
{
id: 3,
name: "Mehul",
Donation: 65000,
},
{
id: 4,
name: "Nina",
Donation: 560,
},
];
Solution:
DonationCollected.jsx
import React from "react";
const DonationCollected = ({ donationData }) => {
return (
<div>
<h3>
Total Donation Collected:{" "}
{donationData.reduce((acc, { Donation }) => {
return (acc += Donation);
}, 0)}
</h3>
</div>
);
};
export default DonationCollected;
App.jsx
import React from "react";
import "./App.css";
import DonationCollected from "./components/DonationCollected";
const donationData = [
{ id: 1, name: "Nitin", Donation: 7800 },
{
id: 2,
name: "Mehak",
Donation: 9500,
},
{
id: 3,
name: "Mehul",
Donation: 65000,
},
{
id: 4,
name: "Nina",
Donation: 560,
},
];
function App() {
return (
<>
<DonationCollected donationData={donationData} />
</>
);
}
export default App;
Output:
Q9. Given an array of objects representing a list of cars. Each object consists of: id, name, price, category. Build a React component that shows on the DOM the total number of cars present in each category.
For Example: if there are categories, luxury and sports, where there are 5 luxury cars and 2 sports car then the data should be represented as:
luxury: 5
sports: 2
Data:
const cars = [
{
id: 1,
name: "supra",
price: 500000,
category: "sports",
},
{
id: 2,
name: "A5",
price: 700000,
category: "luxury",
},
{
id: 3,
name: "huyara",
price: 1500000,
category: "sports",
},
{
id: 4,
name: "agera R",
price: 3500000,
category: "sports",
},
];
Solution:
ListCarByCategory.jsx
import React from "react";
const ListCarByCategory = ({ cars }) => {
const data = cars.reduce((acc, { category }) => {
if (!acc[category]) acc[category] = 1;
acc[category] += 1;
return acc;
}, {});
return (
<div>
<h1>ListCarByCategory</h1>
{Object.keys(data).map((key) => (
<h2 key={key}>
<h3>
{key}: {data[key]}
</h3>
</h2>
))}
</div>
);
};
export default ListCarByCategory;
App.jsx
import React from "react";
import "./App.css";
import ListCarByCategory from "./components/ListCarByCategory";
const cars = [
{
id: 1,
name: "supra",
price: 500000,
category: "sports",
},
{
id: 2,
name: "A5",
price: 700000,
category: "luxury",
},
{
id: 3,
name: "huyara",
price: 1500000,
category: "sports",
},
{
id: 4,
name: "agera R",
price: 3500000,
category: "sports",
},
];
function App() {
return (
<>
<ListCarByCategory cars={cars} />
</>
);
}
export default App;
Output:
Q10. Create an array of objects representing students marks out of 100. Each object consists of: id, name and marks. Build a React component that calculates the mean marks of all the students to see if the institute passes the criteria of the certification.
- If the mean is above 80, display on the DOM Certification Approved.
- If the mean is below 80, display on the DOM Certification Not Approved.
Data:
const studentData = [
{
id: 1,
name: "Nitin",
marks: 78,
},
{
id: 2,
name: "Mehak",
marks: 95,
},
{
id: 3,
name: "Mehul",
marks: 65,
},
{
id: 4,
name: "Nina",
marks: 56,
},
];
Solution:
CertificateApprover.jsx
import React from "react";
const CertificateApprover = ({ studentData }) => {
const mean =
studentData.reduce((acc, { marks }) => {
return (acc += marks);
}, 0) / studentData.length;
return (
<div>
<h1>
Student Certification{" "}
{mean > 80 ? (
<span style={{ color: "green" }}>Approved</span>
) : (
<span style={{ color: "red" }}>Not Approved</span>
)}
</h1>
</div>
);
};
export default CertificateApprover;
App.jsx
import React from "react";
import "./App.css";
import CertificateApprover from "./components/CertificateApprover";
const studentData = [
{
id: 1,
name: "Nitin",
marks: 78,
},
{
id: 2,
name: "Mehak",
marks: 95,
},
{
id: 3,
name: "Mehul",
marks: 65,
},
{
id: 4,
name: "Nina",
marks: 56,
},
];
function App() {
return (
<>
<CertificateApprover studentData={studentData} />
</>
);
}
export default App;
Output: