📄Assignments of Class 8
Lists and Keys
Assignment 1: Render a Simple List
Task:Create a React component that renders a list of colors from the array:
const colors = ['Red', 'Green', 'Blue', 'Yellow'];
Solution:
import React from 'react';
function ColorList() {
const colors = ['Red', 'Green', 'Blue', 'Yellow'];
return (
<div>
<h3>Color List</h3>
<ul>
{colors.map((color, index) => (
<li key={index}>{color}</li>
))}
</ul>
</div>
);
}
export default ColorList;
Assignment 2: Render List with
Unique Keys
Task:Modify the above list to use unique keys instead of using array indexes.
Solution:
import React from 'react';
function ColorList() {
const colors = ['Red', 'Green', 'Blue', 'Yellow'];
return (
<div>
<h3>Color List with Unique Keys</h3>
<ul>
{colors.map(color => (
<li key={color}>{color}</li> {/* Using color as key since it's unique */}
))}
</ul>
</div>
);
}
export default ColorList;
Assignment 3: Render an Array of
Objects
Task:Given this array of objects, render the product names in a list.
const products = [
{ id: 1, name: 'Laptop' },
{ id: 2, name: 'Smartphone' },
{ id: 3, name: 'Tablet' }
];
Solution:
import React from 'react';
function ProductList() {
const products = [
{ id: 1, name: 'Laptop' },
{ id: 2, name: 'Smartphone' },
{ id: 3, name: 'Tablet' }
];
return (
<div>
<h3>Products</h3>
<ul>
{products.map(product => (
<li key={product.id}>{product.name}</li>
))}
</ul>
</div>
);
}
export default ProductList;
Assignment 4: Render List with
Multiple Properties
Task:Extend the previous product list to display both the name and price.
const products = [
{ id: 1, name: 'Laptop', price: 900 },
{ id: 2, name: 'Smartphone', price: 600 },
{ id: 3, name: 'Tablet', price: 300 }
];
Solution:
import React from 'react';
function ProductList() {
const products = [
{ id: 1, name: 'Laptop', price: 900 },
{ id: 2, name: 'Smartphone', price: 600 },
{ id: 3, name: 'Tablet', price: 300 }
];
return (
<div>
<h3>Products with Prices</h3>
<ul>
{products.map(product => (
<li key={product.id}>
{product.name} - ${product.price}
</li>
))}
</ul>
</div>
);
}
export default ProductList;
Assignment 5: Filter List Based on
Price
Task:Render only products with a price greater than $500.
Solution:
import React from 'react';
function ProductList() {
const products = [
{ id: 1, name: 'Laptop', price: 900 },
{ id: 2, name: 'Smartphone', price: 600 },
{ id: 3, name: 'Tablet', price: 300 }
];
// Filter products priced above 500
const expensiveProducts = products.filter(product => product.price
> 500);
return (
<div>
<h3>Expensive Products (Price > $500)</h3>
<ul>
{expensiveProducts.map(product => (
<li key={product.id}>
{product.name} - ${product.price}
</li>
))}
</ul>
</div>
);
}
export default ProductList;
Assignment 6: Render Nested Lists
Task:Given the following data structure, render categories with their products as
nested lists:
const categories = [
{
id: 1,
name: 'Electronics',
products: ['Laptop', 'Smartphone', 'Tablet']
},
{
id: 2,
name: 'Furniture',
products: ['Chair', 'Table', 'Sofa']
}
];
Solution:
import React from 'react';
function CategoryList() {
const categories = [
{
id: 1,
name: 'Electronics',
products: ['Laptop', 'Smartphone', 'Tablet']
},
{
id: 2,
name: 'Furniture',
products: ['Chair', 'Table', 'Sofa']
}
];
return (
<div>
<h3>Categories</h3>
<ul>
{categories.map(category => (
<li key={category.id}>
{category.name}
<ul>
{category.products.map((product,
index) => (
<li key={index}>{product}</li>
))}
</ul>
</li>
))}
</ul>
</div>
);
}
Assignment 7: Add Click Handler to
List Items
Task:Render a list of fruits and alert the fruit name when clicked.
const fruits = ['Apple', 'Banana', 'Cherry'];
Solution:
import React from 'react';
function FruitList() {
const fruits = ['Apple', 'Banana', 'Cherry'];
const handleClick = (fruit) => {
alert(`You clicked on ${fruit}`);
};
return (
<div>
<h3>Fruits</h3>
<ul>
{fruits.map(fruit => (
<li key={fruit} onClick={() =>
handleClick(fruit)} style={{ cursor: 'pointer' }}>
{fruit}
</li>
))}
</ul>
</div>
);
}
export default FruitList;
Assignment 8: Dynamic Rendering of
Products with Prices and Filtering Input
Task:Render products with prices and add an input field to filter products by
minimum price.
Solution:
import React, { useState } from 'react';
function FilterableProductList() {
const products = [
{ id: 1, name: 'Laptop', price: 900 },
{ id: 2, name: 'Smartphone', price: 600 },
{ id: 3, name: 'Tablet', price: 300 }
];
const [minPrice, setMinPrice] = useState(0);
const filteredProducts = products.filter(product => product.price >= minPrice);
return (
<div>
<h3>Filter Products by Minimum Price</h3>
<input
type="number"
placeholder="Enter minimum
price"
value={minPrice}
onChange={(e) =>
setMinPrice(Number(e.target.value))}
/>
<ul>
{filteredProducts.map(product => (
<li key={product.id}>
{product.name} - ${product.price}
</li>
))}
</ul>
</div>
);
}
export default FilterableProductList;
Assignment 9: Handle Empty Lists
Gracefully
Task:Modify the product list to display "No products available" if the
list is empty.
Solution:
import React from 'react';
function ProductList({ products }) {
return (
<div>
<h3>Product List</h3>
{products.length === 0 ? (
<p>No products available</p>
) : (
<ul>
{products.map(product => (
<li key={product.id}>{product.name}
- ${product.price}</li>
))}
</ul>
)}
</div>
);
}
export default ProductList;
// Usage example:
// <ProductList products={[]}
/>
Assignment 10: Render List with
Conditional Styling
Task:Render a list of tasks with completed tasks shown in green and pending tasks in
red.
const tasks = [
{ id: 1, name: 'Do laundry', completed: true },
{ id: 2, name: 'Clean room', completed: false },
{ id: 3, name: 'Write report', completed: true }
];
Solution:
import React from 'react';
function TaskList() {
const tasks = [
{ id: 1, name: 'Do laundry', completed: true },
{ id: 2, name: 'Clean room', completed: false },
{ id: 3, name: 'Write report', completed: true }
];
<div>
<h3>Tasks</h3>
<ul>
{tasks.map(task => (
<li
key={task.id}
style={{ color: task.completed ? 'green'
: 'red' }}
>
{task.name}
</li>
))}
</ul>
</div>
);
}
export default TaskList;
Summary
These
assignments cover:
- Using map() to render lists
- Proper use of keys in list
rendering
- Rendering arrays of objects
with multiple properties
- Filtering lists dynamically
- Nested lists and conditional
rendering
- Handling user interaction with
list items
- Dynamic state-driven filtering
