Scribd
Upload
24 views2 pages

Experiment 11

Uploaded by

bonigisaikumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
24 views2 pages

Experiment 11

Uploaded by

bonigisaikumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

EXPERIMENT-1

1. Create a React component called ProductList that receives an array of


products as props and renders a list of product items. Each product
item should display the product name, price, and a button to add the
product to the cart. Implement the functionality to update the cart
when a product is added.

import React, { useState } from 'react';

const ProductList = ({ products }) => {


const [cart, setCart] = useState([]);

const addToCart = (product) => {


setCart([...cart, product]);
};

return (
<div>
<h2>Product List</h2>
{products.map((product, index) => (
<li key={index}>
<span>{product.name} - ${product.price}</span>
<button onClick={() => addToCart(product)}>Add to Cart</button>
</li>
))}
</ul>
<h2>Cart</h2>
<ul>
{cart.map((item, index) => (
<li key={index}>
{item.name} - ${item.price}
</li>
))}
</ul>
</div>
);
};

export default ProductList;


2.Create a React component called TodoList that receives an array of
todo items as props. Each todo item should have a title and a
completed status. Render the todo items as a list with checkboxes
indicating the completion status. Implement the functionality to toggle
sthe completion status when a checkbox is clicked.

import React from 'react';

const TodoList = ({ todos }) => {


const toggleTodo = (index) => {
const updatedTodos = todos.map((todo, i) => {
if (i === index) {
return { ...todo, completed: !todo.completed };
}
return todo;
});
// Update state or dispatch an action to update state
// For simplicity, I'll just log the updated todos here
console.log(updatedTodos);
};

return (
<div>
<h2>Todo List</h2>
<ul>
{todos.map((todo, index) => (
<li key={index}>
<input
type="checkbox"
checked={todo.completed}
onChange={() => toggleTodo(index)}
/>
<span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
{todo.title}
</span>
</li>
))}
</ul>
</div>
);
};

export default TodoList;

You might also like