Open in app

Sign in

Write

Sign in

ReactJS : Practice Set 1

Rahul Kumar
8 min readMar 8, 2024

--

  1. Build an EmployeeCard component in React to display name, designation and work experience of a person. Pass name, designation and work experience as props.
  • The colour of “Designation:” should be green.
  • The colour of “Experience:” should be blue.

solution:

EmployeeCard.jsx

import React from "react";

const EmployeeCard = ({ name, designation, workExperience }) => {
  return (
    <div style={{ border: "1px solid black" }}>
      <h2>Employee Details:</h2>
      <h5>Name: {name}</h5>
      <h6 style={{ color: "green" }}> Designation: {designation}</h6>
      <h6 style={{ color: "blue" }}>Work Experience: {workExperience}</h6>
    </div>
  );
};

export default EmployeeCard;

App.jsx

import React from "react";
import "./App.css";
import EmployeeCard from "./components/EmployeeCard";

function App() {
  return (
    <>
      <EmployeeCard
        name={"Rahul Kumar"}
        designation={"SSE"}
        workExperience="2 yrs"
      />
    </>
  );
}

export default App;

Output:

Q2. 2. Build a React component to display a button with custom styles and button text as ‘Start’. The styles should be passed as props.

Data:

const backgroundColor = 'lightgreen'
const color = 'darkgreen'
const borderRadius = '5px'
const padding = '10px'

Solution:

Button.jsx

import React from "react";

const Button = ({ backgroundColor, color, borderRadius, padding }) => {
  return (
    <button style={{ backgroundColor, color, borderRadius, padding }}>
      Start
    </button>
  );
};

export default Button;

App.jsx

import React from "react";
import "./App.css";
import Button from "./components/Button";

function App() {
  const backgroundColor = "lightgreen";
  const color = "darkgreen";
  const borderRadius = "5px";
  const padding = "10px";
  return (
    <>
      <Button
        backgroundColor={backgroundColor}
        color={color}
        borderRadius={borderRadius}
        padding={padding}
      />
    </>
  );
}

export default App;

Q 3. Build a React component to display a list of stationery items with a header. The items and header should be passed as props. Header should be “Stationery Items”.

Data:

const items = ['pen', 'pencil', 'ruler', 'eraser']

Solution:

StationeryItems.jsx

import React from "react";

const StationeryItems = ({ items }) => {
  return (
    <div>
      <h1>Stationery Items:</h1>
      <ul>
        {items.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default StationeryItems;

App.jsx

import React from "react";
import "./App.css";
import StationeryItems from "./components/StationeryItems";

const items = ["pen", "pencil", "ruler", "eraser"];
function App() {
  return (
    <>
      <StationeryItems items={items} />
    </>
  );
}

export default App;

Q 4. Build a React component to display an image with a caption. The image and caption should be passed as props.

Data:

const imageLink =
 'https://cdn.pixabay.com/photo/2023/03/18/10/43/plum-blossoms-7860381_1280.jpg'
const caption = 'Spring Flowers'

Solution:

ImageWithCaption.jsx

import React from "react";

const ImageWithCaption = ({ imageLink, caption }) => {
  return (
    <div>
      <img src={imageLink} alt="" />
      <figcaption>{caption}</figcaption>
    </div>
  );
};

export default ImageWithCaption;

App.jsx

import React from "react";
import "./App.css";

import ImageWithCaption from "./components/ImageWithCaption";

function App() {
  const imageLink =
    "https://cdn.pixabay.com/photo/2023/03/18/10/43/plum-blossoms-7860381_1280.jpg";
  const caption = "Spring Flowers";
  return (
    <>
      <ImageWithCaption imageLink={imageLink} caption={caption} />
    </>
  );
}

export default App;

Q 5. Given the products data. Build a React component to display the name of all products as an unordered list on the DOM. Order of items display can vary from the image shown below.

Data:

const products = [
 { name: 'Perk', quantity: 10, sales: 7 },
 { name: 'Pepsi', quantity: 10, sales: 20 },
 { name: 'Coke', quantity: 18, sales: 50 },
 { name: 'Maggi', quantity: 41, sales: 22 },
 { name: '5Star', quantity: 7, sales: 9 },
]

Solution:

Products.jsx

import React from "react";

const Products = ({ products }) => {
  return (
    <div>
      <h1>Product Names</h1>
      <ul>
        {products.map(({ name }) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
    </div>
  );
};

export default Products;

App.jsx

import React from "react";
import "./App.css";

import Products from "./components/Products";

const products = [
  { name: "Perk", quantity: 10, sales: 7 },
  { name: "Pepsi", quantity: 10, sales: 20 },
  { name: "Coke", quantity: 18, sales: 50 },
  { name: "Maggi", quantity: 41, sales: 22 },
  { name: "5Star", quantity: 7, sales: 9 },
];
function App() {
  return (
    <>
      <Products products={products} />
    </>
  );
}

export default App;

App.css

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  /* text-align: center; */
}

Output:

Q 6. Consider the products data from previous question and display all the product details as unordered list for which the number of sales is more than the quantity.

Order of items display can vary from the image shown below.

Data:

const products = [
 { name: 'Perk', quantity: 10, sales: 7 },
 { name: 'Pepsi', quantity: 10, sales: 20 },
 { name: 'Coke', quantity: 18, sales: 50 },
 { name: 'Maggi', quantity: 41, sales: 22 },
 { name: '5Star', quantity: 7, sales: 9 },
]

Solution:

ProductsFilter.jsx

import React from "react";

const ProductsFilter = ({ products }) => {
  return (
    <div>
      <h1>Filtered Products:</h1>
      <ul>
        {products.map(({ name, quantity, sales }) => {
          if (sales > quantity)
            return (
              <li>
                Name:{name}, Quantity: {quantity}, Sales: {sales}
              </li>
            );
        })}
      </ul>
    </div>
  );
};

export default ProductsFilter;

App.jsx

import React from "react";
import "./App.css";

import ProductsFilter from "./components/ProductsFilter";

const products = [
  { name: "Perk", quantity: 10, sales: 7 },
  { name: "Pepsi", quantity: 10, sales: 20 },
  { name: "Coke", quantity: 18, sales: 50 },
  { name: "Maggi", quantity: 41, sales: 22 },
  { name: "5Star", quantity: 7, sales: 9 },
];
function App() {
  return (
    <>
      <ProductsFilter products={products} />
    </>
  );
}

export default App;

Output:

Q 7. Given a student object with student name and the marks for english, maths and computers.

If the total marks of a student is

>= 225, the grade is A,

>=180 the grade is B,

>=150 the grade is C,

otherwise the grade is D.

Build a React Component that takes the student object as props and uses it to show all the students details, total marks and grade on the DOM as shown in the image below.

Data:

const student = {
 name: 'John Doe',
 english: 90,
 maths: 80,
 computers: 70,
}

Solution:

App.jsx

import React from "react";
import "./App.css";
import StudentDetails from "./components/StudentDetails";

const student = {
  name: "John Doe",
  english: 90,
  maths: 80,
  computers: 70,
};

function App() {
  return (
    <>
      <StudentDetails {...student} />
    </>
  );
}

export default App;

StudentDetails.jsx

import React from "react";

const StudentDetails = ({ name, english, maths, computers }) => {
  const totalMarks = english + maths + computers;
  // console.log(name);
  return (
    <div>
      <h1>Student Details:</h1>
      <h3>Name: {name}</h3>
      <h3>English: {english}</h3>
      <h3>Maths: {maths}</h3>
      <h3>Computers: {computers}</h3>
      <h3>Total Marks: {totalMarks}</h3>
      <h3>
        Grade:
        {totalMarks >= 225
          ? "A"
          : totalMarks >= 180
          ? "B"
          : totalMarks >= 150
          ? "C"
          : "D"}
      </h3>
    </div>
  );
};

export default StudentDetails;

Output:

Q8. Build a React component to display all the employee details as unordered list on the DOM in the following format:

name: name, level: level, dept: dept, designation: designation, salary: salary

No need to pass as props.

Given Data:

const employees = [
 {
 name: 'Jack Smith',
 level: 2,
 dept: 'Tech',
 designation: 'Manager',
 salary: 24000,
 },
 {
 name: 'Mary Robbins',
 level: 3,
 dept: 'Fin',
 designation: 'Manager',
 salary: 28000,
 },
 {
 name: 'Steve Williams',
 level: 4,
 dept: 'Ops',
 designation: 'President',
 salary: 35000,
 },
 {
 name: 'Bob Andrews',
 level: 1,
 dept: 'Fin',
 designation: 'Trainee',
 salary: 16500,
 },
 {
 name: 'Dave Martin',
 level: 2,
 dept: 'Fin',
 designation: 'Manager',
 salary: 21700,
 },
 {
 name: 'Julia Clarke',
 level: 3,
 dept: 'Ops',
 designation: 'Manager',
 salary: 26900,
 },
{
 name: 'Kathy Jones',
 level: 4,
 dept: 'Tech',
 designation: 'President',
 salary: 42500,
 },
 {
 name: 'Tom Bresnan',
 level: 2,
 dept: 'Tech',
 designation: 'Manager',
 salary: 22200,
 },
]

Solution:

EmployeeDetails.jsx

import React from "react";

const EmployeeDetails = ({ employees }) => {
  return (
    <div>
      <h1>Employee Details:</h1>
      <ul>
        {employees.map(({ name, level, dept, designation, salary }) => (
          <li>
            <h3>
              name: {name}, Level:{level}, Dept: {dept}, designation:
              {designation}, salary:{salary}
            </h3>
          </li>
        ))}
      </ul>
    </div>
  );
};
export default EmployeeDetails;

App.jsx

import React from "react";
import "./App.css";
import StudentDetails from "./components/StudentDetails";
import EmployeeDetails from "./components/EmployeeDetails";

const employees = [
  {
    name: "Jack Smith",
    level: 2,
    dept: "Tech",
    designation: "Manager",
    salary: 24000,
  },
  {
    name: "Mary Robbins",
    level: 3,
    dept: "Fin",
    designation: "Manager",
    salary: 28000,
  },
  {
    name: "Steve Williams",
    level: 4,
    dept: "Ops",
    designation: "President",
    salary: 35000,
  },
  {
    name: "Bob Andrews",
    level: 1,
    dept: "Fin",
    designation: "Trainee",
    salary: 16500,
  },
  {
    name: "Dave Martin",
    level: 2,
    dept: "Fin",
    designation: "Manager",
    salary: 21700,
  },
  {
    name: "Julia Clarke",
    level: 3,
    dept: "Ops",
    designation: "Manager",
    salary: 26900,
  },
  {
    name: "Kathy Jones",
    level: 4,
    dept: "Tech",
    designation: "President",
    salary: 42500,
  },
  {
    name: "Tom Bresnan",
    level: 2,
    dept: "Tech",
    designation: "Manager",
    salary: 22200,
  },
];

function App() {
  return (
    <>
      <EmployeeDetails employees={employees} />
    </>
  );
}

export default App;

Output:

Q 9. Considering above data given in question 8, at the end of all the employee details, calculate and display the total salary expense of the company. Total Salary Expense: totalSalary

EmployeeDetails.jsx

import React from "react";

const EmployeeDetails = ({ employees }) => {
  const totalSalary = employees.reduce((acc, { salary }) => {
    return (acc += salary);
  }, 0);
  return (
    <div>
      <h1>Employee Details:</h1>
      <ul>
        {employees.map(({ name, level, dept, designation, salary }) => (
          <li>
            <h3>
              name: {name}, Level:{level}, Dept: {dept}, designation:
              {designation}, salary:{salary}
            </h3>
          </li>
        ))}
      </ul>
      <h2>Total Salary Expense: {totalSalary}</h2>
    </div>
  );
};
export default EmployeeDetails;

App.jsx

It is same as above.

Output:

Q 10. Considering above data given in question 8, display the details of employee with orange backgroundColor, who are at level 2.

EmployeeDetails.jsx

import React from "react";

const EmployeeDetails = ({ employees }) => {
  const totalSalary = employees.reduce((acc, { salary }) => {
    return (acc += salary);
  }, 0);
  return (
    <div>
      <h1>Employee Details:</h1>
      <ul>
        {employees.map(({ name, level, dept, designation, salary }) => (
          <li style={{ background: level === 2 ? "orange" : "" }}>
            <h3>
              name: {name}, Level:{level}, Dept: {dept}, designation:
              {designation}, salary:{salary}
            </h3>
          </li>
        ))}
      </ul>
      <h2>Total Salary Expense: {totalSalary}</h2>
    </div>
  );
};
export default EmployeeDetails;

Output:

Q11. Considering above data given in question 8, add a border around the employee details whose designation is “President”.

Solution.

EmployeeDetails.jsx

import React from "react";

const EmployeeDetails = ({ employees }) => {
  const totalSalary = employees.reduce((acc, { salary }) => {
    return (acc += salary);
  }, 0);
  return (
    <div>
      <h1>Employee Details:</h1>
      <ul>
        {employees.map(({ name, level, dept, designation, salary }) => (
          <li
            style={{
              background: level === 2 ? "orange" : "",
              border: designation === "President" ? "1px solid green" : "",
            }}
          >
            <h3>
              name: {name}, Level:{level}, Dept: {dept}, designation:
              {designation}, salary:{salary}
            </h3>
          </li>
        ))}
      </ul>
      <h2>Total Salary Expense: {totalSalary}</h2>
    </div>
  );
};
export default EmployeeDetails;

Output:

Thanks…

Reactjs
JavaScript
Conditional Rendering
React

--

--

Rahul Kumar

Written by Rahul Kumar

8 Followers

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams