Open in app

Sign in

Write

Sign in

ReactJS : Practice Set 3

Rahul Kumar
10 min readMar 9, 2024

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:

Thanks…

Reactjs
Map Reduce Filter
JavaScript
Conditional Rendering
Js Reduce

--

--

Rahul Kumar
Rahul Kumar

Written by Rahul Kumar

32 Followers
3 Following

MERN Stack Developer building scalable web apps with MongoDB, Express.js, React.js, Node and TS. Sharing insights and best practices for modern web development.

No responses yet

Help

Status

About

Careers

Press

Blog

Privacy

Rules

Terms

Text to speech