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

Written by Rahul Kumar

8 Followers

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams